Keeping parent page active in the nav bar, when on a child page

HTML & CSS
1

Bit of a Wordpress CSS conundrum!

So, I am not showing the child pages in the menu, however I would like to highlight the parent page in the nav bar when in the three child pages.

My understanding is that the CSS that is already in the stylesheet should do the trick, however it isn’t! CSS below.

#nav >ul>li.hovered,

#nav >ul>li.current-menu-ancestor,

#nav >ul>li.current-menu-item 			{	color:#e30613 !important;}



#nav >ul>li.hovered >a,

#nav >ul>li.current-menu-ancestor >a,

#nav >ul>li.current-menu-item >a			{	-moz-opacity:1; filter:alpha(opacity=100); opacity:1;color:#e30613 !important;  }

Any help is greatly appreciated…

2

Hi to thestealthyfox. Welcome to the forums :slight_smile:

Could you post a link to the site? We need to see the HTML that goes with this CSS to know if it’s right or not. Normally this is really easy to do, but with WP in the mix, we CSSers may be up against more than we bargain for. :slight_smile:

3

That would help wouldn’t it!
The dev area site address is http://www.eclipse-experience.com/subdirectory

I just can’t work it out, to me the CSS is all there. I’m not sure if it’s down to the fact I’m using a custom menu? But that’s quite commonplace in WP these days isn’t it…

Thanks Ralph :slight_smile:

4

From what I can see, you’ve just targeted the wrong class name. On ‘ancestor’ pages, the menu class name is

.current-[COLOR="#FF0000"]page[/COLOR]-ancestor

rather than

.current-[COLOR="#FF0000"]menu[/COLOR]-ancestor
5

Hmmm, I’ve changed menu over to page, but still no joy? I did try that earlier too. This is why it’s got me completely baffled!

6

The changes aren’t online yet. Make sure to change the rule for the <a>s:

#nav > ul > li.hovered > a, #nav > ul > li.current-[COLOR="#FF0000"]page[/COLOR]-ancestor > a, #nav > ul > li.current-menu-item > a {
    color: #E30613 !important;
    opacity: 1;
}
7

Perfect - all working! Thanks :slight_smile: I have another query, but should I start another thread for that?

8

Actually, I’ve just realised - when I’m on a single post page, it doesn’t highlight the news part on the menu. Any suggestions?

9

Weirdly, the menu in that section places a different class on the LIs. So you’d need to add this:

#nav > ul > li.hovered > a, #nav > ul > li.current-page-ancestor > a[COLOR="#FF0000"], #nav > ul > li.current_page_parent a[/COLOR], #nav > ul > li.current-menu-item > a {
    color: #E30613 !important;
    opacity: 1;
}

O, the joys of WordPress (not!).

10

Absolutely perfect - thanks you’re a life saver :slight_smile:

11

You’re welcome. Glad it helped. :slight_smile: