How to get post pages and other single pages to make menu item 'current'

I think you may need to resort to jQuery to achieve this. For instance:

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

     $('.sub-menu li.current-post-ancestor').parents('li').addClass('current-menu-ancestor');

});

That would add the class .current-menu-ancestor to the top-level menu item (in this case About) when a post within your News category (which is set as a sub-menu item to About) is displayed. You could then style .current-menu-ancestor however you’d like via CSS.

If you’re not clear on how to add jQuery to your theme, this is a good overview.

Thank you for your reply..no joy though…

Think I need to put different values into the script, but can’t break down the jQuery to understand how to do that…

HTML for menu is as follows:

<ul id="menu-menu-1" class="twelve columns"><li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="https://marble-design.co.uk/test_sites/">Home</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-17"><a href="https://marble-design.co.uk/test_sites/?page_id=4">Info</a>
<div class="dropdown"><ul>
	<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="https://marble-design.co.uk/test_sites/?page_id=4">About the Club</a></li>
	<li id="menu-item-596" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-596"><a href="https://marble-design.co.uk/test_sites/?page_id=594">Events</a></li>
	<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="https://marble-design.co.uk/test_sites/?page_id=8">Links</a></li>
	<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-21"><a href="https://marble-design.co.uk/test_sites/?page_id=10">News</a></li>
</ul></div>
</li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="https://marble-design.co.uk/test_sites/?page_id=6">Contact</a></li>
<li id="menu-item-611" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-611"><a href="https://marble-design.co.uk/test_sites/?page_id=400">Photos</a></li>
</ul>

Ah – I was using default WordPress menu styles that you get when you create your menu through Appearance > Menus (using wp_nav_menu). I was also assuming the “News” page was actually a category archive page. Is that how you’re set up or did you write your own?

If you wrote your own, you could find a way to add the current-menu-ancestor class programmatically. Or you could use the jQuery but change out the styles like so:

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

     $('.dropdown li.current_page_parent').parents('li').addClass('current-menu-ancestor');

});

This was the HTML for my original menu by the way, so you can see how it related to the original jQuery above:

<ul id="menu-main-menu">
  <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="/master/wp/">Home Page</a></li>
  <li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-11"><a href="/master/wp/?page_id=2">Sample Page</a>
     <ul class="sub-menu">
	<li id="menu-item-10" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-10"><a href="/master/wp/?cat=1">Uncategorized</a></li>
    </ul>
  </li>
</ul>

you are a star!!! thank you!!