Multiple menu items highlighted in wordpress

3 Views

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”.

Read More

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.

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. 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.