Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
http://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?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Good idea – it would’ve been better for me to link it straight away.
http://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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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
