Conditional CSS based on menu items and ancestors

Hi. I’m using Elementor Pro as a design tool in WordPress. I have a question regarding some custom CSS.

Let’s get some info out of the way first. I have a page named Products. This page has two children (Category_1 and Category_2). These children have at least 20 children pages each that cover a lot of products.

In my header, I have a navigation menu. What I want to do is that when one of the grandchildren to Products is open/active, its ancestors (Products and Category_1 or Category_2) should be highlighted as active in the menu.

This is not a problem if I include the grandchild page in the navigation menu, but I don’t want to do that. I only want two generations listed in the menu: Products and a drop-down with Category_1 and Category_2.

So, is it possible to write some CSS that is based on the following conditions?

if page has a parent and that parent has a menu item, highlight menu item as active

Couldn’t figure this one out on my own. I only got it to work where the ancestors were highlighted if the page active was also present in the menu.

• This topic was modified 3 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic