Nav Menu Current Item (and Parent)

  • Resolved rd4k1

    (@rd4k1)


    11 years, 12 months 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. ]

Viewing 4 replies - 1 through 4 (of 4 total)

  • 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?

    Thread Starter rd4k1

    (@rd4k1)

    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’)

    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.

    Thread Starter rd4k1

    (@rd4k1)

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Nav Menu Current Item (and Parent)’ is closed to new replies.