WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Nav Menu Current Item (and Parent) (5 posts)

  1. rd4k1
    Member
    Posted 1 year ago #

    When I use any permutation of current item (current_page_item, etc) or current parent/ancestor it always effects the whole submenu.

    Here's what I have:
    php:

    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container'=> 'nav', 'container_id'=>'nav_menu', 'container_class'=>'grid_7') ); ?>

    css:

    #nav_menu li a:hover, #nav_menu .current_page_item a{
    	border-right: 10px solid #ffab48;
    }
    
    #nav_menu li a:hover:first-letter, #nav_menu .current_page_item a:first-letter{
    	color: #ffab48;
    }

    [ Please do not bump, that's not permitted here. ]

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hard to tell for sure without seeing the site, but it looks like your CSS is targeting all links (not just the current menu ones) by these selectors:

    #nav_menu li a:hover,

    and this

    #nav_menu li a:hover:first-letter,

    Commas go between selectors, so the above are stand-along selectors, not part of the rest of the CSS code.

    Does that address the problem?

  3. rd4k1
    Member
    Posted 1 year ago #

    no, those are just for hovering. The problem is when the menu item is hightlighted, indicating you're on that page.

    I can't show considering this is a localhost but perhaps I can illustrate.

    Listing vertically for simplicity

    On Page1

    >Page1<
    Page2
    Page3
    --Sub1
    --Sub2
    --Sub3
    Page4

    On Page3

    Page1
    Page2
    >Page3<
    -->Sub1<
    -->Sub2<
    -->Sub3<
    Page4

    If Page3 is highlighted to indicate the current page, all the child items in the submenu are highlighted as well (does not happen for hovering, only for classes like 'current_page_item' as well as 'current_page_parent')

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Sorry, I still don't understand, but are you using Firebug to see what's going on with the CSS? IMHO, it's the only way to do that kind of thing. It's often tedious to track those kinds of things down and virtually impossible without being able to see the site live.

  5. rd4k1
    Member
    Posted 1 year ago #

    I got it now. I don't know why I didnt think of it before, but I got it using the immediate child selector -- The greater than symbol (>) for those who find this and may not know.

    So instead of it being:

    #nav_menu li a:hover, #nav_menu li.current_page_item a, #nav_menu li.current_page_parent a{
    	border-right: 10px solid #ffab48;
    }
    
    #nav_menu ul li a:hover:first-letter, #nav_menu li.current_page_item a:first-letter, #nav_menu li.current_page_parent a:first-letter{
    	color: #ffab48;
    }

    It is now:

    #nav_menu li a:hover, #nav_menu li.current_page_item>a, #nav_menu li.current_page_parent>a{
    	border-right: 10px solid #ffab48;
    }
    
    #nav_menu ul li a:hover:first-letter, #nav_menu li.current_page_item>a:first-letter, #nav_menu li.current_page_parent>a:first-letter{
    	color: #ffab48;
    }

    And that highlights the current page or parent page without effecting the submenu items.

Topic Closed

This topic has been closed to new replies.

About this Topic