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

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.

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

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][1]


[1]:

[To see links please register here]

You can insert the following code in the theme’s footer.php file right before the closing body tag </body>.

<!-- 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](

[To see links please register here]

)!

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

I had a bit of a problem editing this but found an easy solution.
I am using the Wordpress Storefront theme, just paste this into your child theme's `style.css` file:

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

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;
}

This worked for me. The following CSS will allow you to style the active menu... down to three menus deep.

.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}

- The menu button that represents the currently active page will be
YELLOW,
- If the button representing the currently active page is nested, its
parent will be GREEN... else the Top-Level button on your menu will be GREEN.

- And most importantly (no matter how many levels of nesting appear in
your menu) Any element with a class of **.current-menu-ancestor**
will be styled with a RED background.


It is also possible to ONLY style the **.current-menu-ancestor** and any parent menu-item will be styled.

# WordPress 5.7
**Tested and Working, 2021**

Year 2021. If any of you still looking for the solution, then here it is.

This will highlight the parent and its child. If no child menu then the parent will get highlighted. Remember `!important` is required.


.current-menu-parent > a,
.current-menu-item a {
color: blue !important; /* Important is required */
}

if you trying to highlight parent item exist on main-menu (like me!), try this with jQuery:

jQuery(document).ready(function() {
jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]')
.parent().addClass('current-menu-item');
});

i also added 'default' class into the one of items (at 'li') to select it for my post pages:

jQuery(document).ready(function() {
if (jQuery('#menu-mainmenu a[href*="' + document.URL.split('/')[3] + '"]')
.parent().addClass('current-menu-item').length == 0 &&
document.URL.split('/')[3].length > 1)
jQuery('#menu-mainmenu .default').addClass('current-menu-item');
});

with this, you will have selection as below. Ex: Home | Shop | Posts | About-us

> 'http://example.com': >Home | Shop | Posts | About-us
>
> 'http://example.com/shop': Home | >Shop | Posts | About-us
>
> 'http://example.com/shop/product-1': Home | >Shop | Posts | About-us
>
> 'http://example.com/posts': Home | Shop | >Posts | About-us
>
> 'http://example.com/new-post': Home | Shop | >Posts | About-us
>
> 'http://example.com/about-us': Home | Shop | Posts | >About-us