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

Question

I have a basic menu and some of the menu items have submenus. I have very little experience with wordpress and don't have time to dive deeper into the details right now. So my question is, what is the simplest way to highlight the top menu item when the use navigates to one of the submenu pages. (I tried using both javascript and also pure css to set the color property by element id and by using the "current-cat-parent" class but neither worked).
Any help is greatly appreciated.

Note: I am using a theme called chameleon.

Answer 1

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

Answer 2

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.