WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change Color of Active Menu (Recipes, Skinny Blog) (5 posts)

  1. A2labz
    Member
    Posted 2 months ago #

    Hello All,

    I am working on changing the color of the menu item for instance, if you you are on that selected page... The menu item should be colored or highlighted. For now, the menu is good except for two menu items.
    Recipes and Skinny Blog
    menu-item-37 and menu-item-482 are giving me trouble. The color I want them to show when clicked is #6F2A8E

    This CSS below will highlight the bar when its not clicked. I need it highlighted when clicked, any advice??

    .menu-item-37 a {
    background-color: #6F2A8E;
    }

    I have been trying all sorts of CSS tricks but none being successful.

    here is the page source for that menu i am working on. If anyone can give me an example code, I can get it done. ty!

    <!-- NAV -->
    <nav class="w-nav layout_hor touch_disabled">
    <div class="w-nav-control">
    <i class="fa fa-bars"></i>
    </div>
    <ul class="w-nav-list level_1">
    <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-43"><span class="w-nav-title">ABOUT</span><span class="w-nav-arrow"></span>
    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-41"><span class="w-nav-title">SKINNY DOWN</span><span class="w-nav-arrow"></span>
    <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-40"><span class="w-nav-title">FITNESS</span><span class="w-nav-arrow"></span>
    <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-39"><span class="w-nav-title">MIND-BODY</span><span class="w-nav-arrow"></span>
    <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-36"><span class="w-nav-title">HEALTHY LIVING</span><span class="w-nav-arrow"></span>
    <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-37"><span class="w-nav-title">RECIPES</span><span class="w-nav-arrow"></span>
    <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-165"><span class="w-nav-title">GO SHOPPING</span><span class="w-nav-arrow"></span>
    <li id="menu-item-482" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_1 menu-item-482"><span class="w-nav-title">SKINNY BLOG</span><span class="w-nav-arrow"></span>
    <li id="menu-item-916" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has_sublevel w-nav-item level_1 menu-item-916"><span class="w-nav-title">HOT OFF THE PRESS</span><span class="w-nav-arrow"></span>
    <ul class="w-nav-list level_2">
    <li id="menu-item-1166" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_2 menu-item-1166"><span class="w-nav-title">Flatten Your Stomach While You Drive</span><span class="w-nav-arrow"></span>
    <li id="menu-item-917" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_2 menu-item-917"><span class="w-nav-title">Does the Size of Your Plate Make You Fat?</span><span class="w-nav-arrow"></span>
    <li id="menu-item-982" class="menu-item menu-item-type-post_type menu-item-object-page w-nav-item level_2 menu-item-982"><span class="w-nav-title">Sleep More – Weight Less</span><span class="w-nav-arrow"></span>
    <li id="menu-item-1043" class="menu-item menu-item-type-custom menu-item-object-custom w-nav-item level_2 menu-item-1043"><span class="w-nav-title">Moderation vs. Deprivation</span><span class="w-nav-arrow"></span>

    </nav><!-- /NAV -->

    THANKS!

  2. somedudes
    Member
    Posted 2 months ago #

    // Highlight when hover
    .menu-item-37 a:hover {
    background-color: #6F2A8E;
    }

    // Highlight when click
    .menu-item-37 a:active {
    background-color: #6F2A8E;
    }

  3. A2labz
    Member
    Posted 2 months ago #

    Thanks, I entered that in and was not able to see any change.

    I know that because I have the pages set to go to a custom URL, that this is causing this. Same thing with the blog menu item.
    http://skinnytimes.com/category/our-blog/
    http://skinnytimes.com/category/skinny-times-recipes/

    Since they are going to a custom URL, it does not stick when applying the active CSS.

  4. A2labz
    Member
    Posted 2 months ago #

    Sorry to waste time. I found a way easier way to fix it. I appreciate all the help somedudes

  5. somedudes
    Member
    Posted 2 months ago #

    No problem. Glad you fixed it.

Reply

You must log in to post.

About this Topic