Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am using WordPress as the CMS for my website. For my navigation menu, I am using WordPress' inbuilt navigation menu function. You add categories, 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.

How can I highlight only one menu item, even though the post is in multiple categories?

share|improve this question

2 Answers 2

This question was also asked on stackoverflow. Here's a copy of the answer i gave there:

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.

share|improve this answer

I know this question is old and without a selected answer but I would like to elaborate and extend upon Thomas' response earlier. The nth-of-type selector is pretty well supported but older versions of IE < 9 don't support it.

My solution would be to use the more widely supported first-child selector instead.

.current-menu-item:first-child {
    background:#ffff00;
    /* Highlight styles */
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.