Multiple menu items highlighted in wordpress

1
votes

I've scoured the internet for several hours and turned up similar questions to mine, but they were all unanswered so I have come here for support.

I am using Wordpress as the CMS for my website. For my navigation menu, I am using wordpresses inbuilt navigation menu function. You add categories or page etc to this and it generates a list with certain classes you can style - like "current-menu-item".

My problem lies here: I have several categories in my menu, and some posts have to be assigned to multiple categories.

If a post was for example in a Category A only, then when you are on the page with that post, Category A would be highlighted in the menu.

If a post is in Category A and Category B, then when you are on the page with that post, Category A and Category B would both be highlighted.

What I want is for only one menu item to be highlighted, even though the post is in multiple categories.

Does anybody know how to do this? Much appreciated.

1
wordpressmenunavigationcategories

1 Answers

4
votes

Perhaps you could style it using the nth-of-type CSS3 selector.

.current-menu-item:nth-of-type(1) {
    background:#ffff00;
    /* Highlight styles */
}

These styles would target only the first occurrence of the .current-menu-item. Likewise, you could choose to target the second with nth-of-type(2), et cetera.