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

you can assign current-menu-item class to .current-menu-ancestor class like

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

It will highlight parent page menu

Please refer this page


You can insert the following code in the theme’s footer.php file right 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 its in PHP so the code's dynamic. What it does is simply add another native WordPress nav li class that makes the link of the current page active.

I wrote a short post here explaining how it works: How to keep parent page navigation link highlighted when viewing a child/sub page!

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


Interesting. Your solution highlighted the parent but not the current child. But it put me on the right path and in the end, this was what I needed.

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

Tags:

Wordpress