How to make top level menu think it has a current item

Question

This question has always tripped me up, but it seems like there should be an easy solution.

I have created a couple pages in a hierarchy as follows.

About Us
    - History
    - Mission

Events
    - Field Day
    - Labor Day Picnic

I have also created three menus in Wordpress. A "Main" Menu that holds:

About Us
Events

This menu is displayed horizontally across the top of the website. I also have two secondary menus, "AboutUsMenu" which just holds the following two pages:

History
Mission

The third menu, "EventsMenu" which holds the other two sub pages:

Field Day
Labor Day Picnic

I added a meta box on the page editor which let's me associate one of the two sub menus with every page. This allows me to show my "Main" menu across the top of the website, and then on each page, I can dynamically figure out which sub menu to show on any page.

The problem occurs when the user visits a sub page, say /about-us/mission. Since I'm on the mission page, "Main" menu does not give the About Us page a css class of current_page_item. Technically, it's not the current page, but I would like to be able to style it as the current page since it is the active section as far the user is concerned. Main menu doesn't know anything about the sub page so Wordpress can't add the current_page_item or current_page_ancestor CSS class.

I'm using wp_nav_menu to write all menus.

Can anyone tell me an easy way to link all of this together so the menus will understand they are the current menu items.

Answer 1

Would jQuery .parent() be an option for you?

jQuery('.current_page_item').parent().addClass("classname");

If not you could write your own iteration code for the nav menus and check the various conditions as you assemble the list, but I'm guessing this would be a lot easier.