WordPress.org

1. rd4k1
   Member
   Posted 5 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. ]

2. WPyogi
   Volunteer Moderator
   Posted 5 months 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 5 months 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 5 months 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 5 months 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.

Reply

You must log in to post.