Highlight ancestor AND current menu item at the same time
Sorry if this is too dumb of a question, BUT…!
Re-reading the wonderful Dynamic Menu Highlighting Codex article, but I still cannot figure this one out.
I have a horizontal top menu . The usual:
About Gallery Products Contact .
The sidebar menu is basically showing the subpages of these.
I have highlighted the curent-menu-item for each.
Let’s say, the top menu current item is RED, and the sidebar current menu item is BLUE.
How do i manage to highlight BOTH the top menu current item AND the sidebar menu current item at the same time?
Now, if i go to “Products” in the top menu, it’s highlighted (RED), but if i click on the sidebar item “Books”, or “Pencils”, they become highlighted (BLUE) but the Products (RED) is not highlighted anymore…
I know that the answer is somewhere in the conditional tags,that would say, “if the page is “Cars” AND is child of “Products” use .current_menu_item on both”, or something similar.
but i cannot figure it out …
Thanks a lot!
What are you using to create each menu? wp_nav_menu() will output the appropriate classes in the top menu for you to target using CSS.
Yes, i have to use the wp_nav_menu(), because the client needs to be able to change the menu items as he pleases.
I know that there are classes liek .current_menu_item, current_menu_item ancestor and what else, but i cannot figure out how to use them to highlight BOTH menus at the same time – the top adn the sidebar menu, because they have a different CSS when highlighted.
You create CSS rules for each menu with the same properties for background or color etc.
Thanks or your feedback!
I guess, I have not made my question clear enough.
Or maybe I am agonizing over a tiny, simple solution 🙂
I will try and figure it out. When I come up with something , I’ll post.
I have found the answer ( thank you, Firebug developers!)
The horizontal/top menu had a WP class of “.current-page-ancestor” and the sidebar menu items got the WordPress class of “.current_page_parent” so it was easy to add the CSS styles to each, regardless the menu items defined by the client.
Thanks again for the feedback ! 🙂
I have (not so elegantly*) solved the above, but now,
I have another question:
Why is the “current_menu_item” or “current_page_link” or similar NOT generated in the SECOND li :
If I click on to “Kalendarium” – the “current link” ( well all of them – get highlighted.
If I click on “Campus” – Firebug does not show me any “current-menu-item” – there is nothing i could style.
How did this happen? What did I do wrong?
(*I’d love actually to highlight ONLY the LI + the current UL LI at the same time, not all of them, but did not really succeed )
I have same problem: 2 menus and second menu doesn’t show the “current-menu-item” class.
The first menu didn’t show either with:
<?php wp_nav_menu (array ( 'theme_location' => 'sidebar-menu', 'container' => 'nav' ) ); ?>
But I removed the container option and it worked:
<nav> <?php wp_nav_menu (array ( 'theme_location' => 'sidebar-menu' ) ); ?> </nav>
But it doesn’t work in the second menu (not secondary xD) either with or without the container option:
<?php wp_nav_menu (array ( 'theme_location' => 'main-nav-menu') ); ?>
An extended search has been made! =(
- The topic ‘Highlight ancestor AND current menu item at the same time’ is closed to new replies.