How to get the right menu-item highlighted

[Toon61]

Hi all,

I'm using the Executive child-theme.
I have some sub-items under a menu-item.
What I want, is that the menu-item gets highlighted (selected) when I choose/select one of the sub-items.
To clarify this:
I have a menu-item called 'About Us'.
I have a sub-menu-item (a drop-down menu-item) called 'Team'.
When I select 'About Us', the menu-item is highlighted (default behavior in this theme, shown in a different color), but when I select 'Team' (a sub-menu-item from 'About Us') I don't get that highlight.
How can I get the menu-item 'About Us' highlighted in this case, because 'Team' is a sub-menu-item, so 'About Us' should (I want it to) be highlighted.

Any suggestions?

p.s.: All sub-items are pages, not posts.

[bandj]

url?

[Toon61]

This reply has been marked as private.

[Marle]

Hi, I'm trying to do the same thing. I did get it working using the method suggested here.

But then after I created a new menu it broke, and I can't get it to work anymore.

Did you manage to work it out?

[Marle]

Ok, I just worked it out myself.

[Toon61]

Marle,

Can you tell me how you did it.
Because you wrote in a previous comment: 'I did get it working using the method suggested here'.
What is 'the method suggested here'?

[Marle]

So this is what I worked out. I am fairly new to this so I welcome any corrections/refinements.

I found that by making some CSS changes I could get the menu main item to stay highlighted when a sub menu item is opened.
The CSS I used works when the main item is the (page) parent of the sub item. By that I mean the heirarchy created when creating/editing a page, NOT creating the menu itself.

The CSS is changed in 2 places in the child theme's CSS.

First, In addition to this code that is already there

.genesis-nav-menu .current-menu-item > a {
	background-color: #e04b4b;
	color: #fff;

I added directly below it

.genesis-nav-menu .current-page-ancestor > a {
	background-color: #e04b4b;
	color: #fff;

Note I also changed the background colour to be consistent with the red styling preset.

Then further down the Stylesheet current-menu-item was replaced with current page ancestor

.executive-pro-red .enews-widget input[type="submit"],
.executive-pro-red .content .entry-header .entry-meta .entry-comments-link,
.executive-pro-red .genesis-nav-menu .current-page-ancestor > a,
.executive-pro-red .archive-pagination li a,
.executive-pro-red a.button,
.executive-pro-red button,
.executive-pro-red input[type="button"],
.executive-pro-red input[type="reset"],
.executive-pro-red input[type="submit"] {
	background-color: #e04b4b;
}

I am using the red preset, so I only cnanged the code here. If you were using say, the blue preset, make the CSS change there.

Hope that helps.

[Toon61]

Marle,

This looks good, I'm going to try that.
I'll keep you posted.

[Toon61]

Hi Marle,

The CSS for the menu in the Executive theme is slightly different then in your example.
But I got it working!!!

Thank you so much for pointing it out.

[Author]

Posts