[Resolved] Menu 'current' when post is in multiple categories

[John]

The colours for the primary nav menu can be set in the customiser, including different background and text colours for ‘current’.

We have the primary nav menu set up as a list of the categories on the site. So, whenever you are reading a post the category that the post is in is changed to the ‘current’ colours. So far, so very very good.

Now I have hit a problem since we recently have a couple of posts that are in more than one category, the menu (completely logically) marks both of the categories as current and it looks really strange.

How can I make it so that only one of the categories is marked as current in the menu?

The SEO plugin that we use (SEO Framework) lets us choose one category as ‘primary’ but that doesn’t make any difference.

[David]

Hi there,

thats a tricky one – lets give this CSS a try:

.main-navigation .main-nav ul li.current-post-parent ~ .current-post-parent > a {
    background-color: transparent;
    color: #fff;
}

What it should do is target any element with the current-post-parent class that comes after a sibling that also has that class. So only the first item will display the current style…. hopefully

It does mean the whatever current Category comes first in the menu will be the one displayed.

[John]

Sounds like a pretty sensible way to go about it, I will give it a try tomorrow morning, thanks.

[David]

You’re welcome – let us know

[John]

Yep, that definitely works. Thanks David!

I’d like to be able to have the primary category as the one nav highlighted, when I have time I might take a look at the SEO plugin and see if I can find a way to assign a css class to the primary category, but for now this is a perfect solution!

[David]

You’re welcome
I would suggest putting a request into the author = just need a simple CSS class added to the Menu markup.

[Author]

Posts