Multiple menu items highlighted

4 Views

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:

Read More

  • 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?

Post Views: 4

Related posts

Leave a Reply

3 comments

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

  2. 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 */
}

  3. It may be a hotlinking issue.

    You’ll see from this site at http://www.wildpop.ca (Wildpop dot.ca), when you choose “SEO” from the menu, you are directed to what appears to be the “Monthly Packages” page. The SEO link in the menu does not have it’s own page. It is a direct link to a section named (seo_direct) that is contained in a different page, but when you look at the menu again – both menu options are highlighted as “Active Page”.

    Make sure this isn’t the issue for you.