Wordpress Highlight the parent menu item when the child menu item page is selected / loaded.

Question

I have a main menu, and some menu items have submenus. I have very little wordpress experience and don’t have time to dive into the details right now. So my question is: what is the easiest way to highlight the top menu item when use goes to one of the submenu pages. (I tried using both javascript and pure css to set the color property by element id and using the class "current-cat-parent", but it didn’t work). Any help is appreciated.

Note. I am using the chameleon theme.

Answer 1

you can assign the class current-menu-item to the class .current-menu-ancestor, for example

.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{ color: #777777 !important; /* highlight color */ } 

It will display the parent page menu

Please view this page.

Answer 2

You can paste the following code into the footer.php file before the closing body tag.

 <!-- Highlight parent page link when on child page --> <?php if (is_page()) { // displaying a child page ?> <script type="text/javascript"> jQuery("li.current-page-ancestor").addClass('current-menu-item'); </script> <?php } ?> 

The beauty of this is in PHP, therefore the dynamics of the code. It simply adds another native WordPress class nav li that makes the link of the current page active.

I wrote a short entry here explaining how it works: How to save a link to the main page of the page navigation when viewing a child / sub page !

Feel free to let me know if you have questions about this.

Answer 3

Interesting. Your decision highlighted the parent, but not the current child. But that put me on the right track and, in the end, that was what I needed.

 li.current-menu-parent >a, .current-menu-item >a { color: red !important; } 

Answer 4

.current-menu-ancestor did not work for me. .current-page-ancestor did.

Answer 5

I had a problem with editing, but I found an easy solution. I am using the Wordpress Storefront theme, just paste it into your child style.css theme:

 li.current-menu-parent >a { color:red !important; }