Highlighting non-menu page ancestor in Menu

What’s the HTML of this menu?

Currently it’s:

#navigation ul li#menu-item-260.current-menu-ancestor>a,
#navigation ul li#menu-item-260.current-post-ancestor>a,
#navigation ul li#menu-item-260.current-menu-item>a,
.footer_navigation ul li#menu-item-260.current_page_item a,
#navigation ul li#menu-item-260.current_page_item a,
#navigation ul li#menu-item-1292.current-menu-item a,
#navigation ul li#menu-item-260.current_page_parent a {
	color: #BF9A67 !important;
}

#navigation ul li#menu-item-260 a:hover {
	color: #BF9A67 !important;
}

With MOVIE REVIEWS being “#menu-item-260” and MOVIE REVIEWS BY DIRECTOR being “#menu-item-1292”.

If it helps, we can say MOVIE REVIEWS BY TOM HANKS has the page id 431.

Sorry, for HTML I meant like:

<ul>
 <li>
  ...
 </li>
 ...
</ul>

Oh, I believe it’s:

<div id="navigation">

<ul id="menu-primary-menu" class="menu">

<li id="menu-item-260" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-260"><a href="LINK">MOVIE REVIEWS/a>

<ul class="sub-menu">

<li id="menu-item-1292" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1292"><a href="LINK">MOVIE REVIEWS BY DIRECTOR</a></li>

</ul>

</li>

</ul>

</div>

That’s how I think it’s set up anyway (I just copied it from the page source.

I think you need to use JavaScript here to apply a class to the parent, or grandparent. So that you can style it.

I have no idea how to do that. Do you know of any decent online resources that might give some insight of how?

https://api.jquery.com/parents/

jQuery(document).ready(function($) {

  $('.current-menu-item').parents('li').addClass('parent')
                         .parents('li').addClass('grandparent');

});

Sorry, I’m a complete noob when it comes to this. I’ve added the query into my .js document. Do I now just format using CSS?

Can you link your site?

Good idea – it would’ve been better for me to link it straight away.

https://www.ministryofmovies.com/

So, this is the actual menu I’m trying to change:

THE CINNOISSEUR QUEST (Category)
—STUDY GUIDE (Page)

Then, there’s a separate page – THE BIRTH OF CINEMA (1895—1920s) – that isn’t in the menu but is the child page of STUDY GUIDE.

I’m trying to get just THE CINNOISSEUR QUEST to highlight when I’m on THE BIRTH OF CINEMA (1985-1920s) page.

As you’re using a commercial theme you need to talk to your theme’s vendors/ authors. Ask them how you can integrate jQuery into their theme, or even better the entire question you posed.

I see. Will do. Thanks so much for your help!

I actually managed to get a way around using JavaScript. I just added the following code:

.page-id-269 #menu-item-260>a {
	color: #BF9A67 !important;
}

A space instead of “>” highlights all items in the respective menu, but the “>” just highlighted the top menu item: THE CINNOISSEUR QUEST

Solved