All submenu items are highlighted

Hi,

The plugin highlights you sub-menu links only with the red background color. This works as expected as I tested it by having the sub-menu open and scrolling up and down the page. The rule which does this is:

#site-navigation a.mPS2id-highlight {
    background: #E02F15;
}

When you say “all the submenu item are highlighted and marked as active”, do you mean the bold state?

If yes, this happens by your theme’s CSS (it makes any current page link bold). The selector which does this is:
.site-navigation .menu li.current-menu-item > a, .site-navigation .menu .sub-menu li.current-menu-item > a

You could overwrite the theme’s bold state by changing the #site-navigation a.mPS2id-highlight rule you’ve added to:

#site-navigation a.mPS2id-highlight {
    background: #E02F15;
    font-weight: bold;
}

and also add:

.site-navigation .menu li.current-menu-item > a._mPS2id-h, 
.site-navigation .menu .sub-menu li.current-menu-item > a._mPS2id-h {
    font-weight: normal;
}

in your CSS.

thank you, I added the two last part of code you posted and it works perfect.

When you say “all the submenu item are highlighted and marked as active”, do you mean the bold state?

Yes, I meant bold state.

Is there also a way to make the font also red (#E02F15) when active (in addiction to bold)?
Like you said it’s the theme that makes every current page bold, though I’m having difficulties finding a way to do this.

thank you for your great work!

Yes. This is set in line 1258 of your theme’s style.css, so try adding the following in your CSS:

@media screen and (min-width: 800px) {
    .site-navigation .menu .current-menu-ancestor > a, 
    .site-navigation .nav-menu .current-menu-ancestor > a {
        color: #E02F15;
    }
}

thanks.

this code works, but only with the menu items with a submenu (bold and red) but not with the “normal” page menu (don’t know if it’s clear what I’m trying to say eheh).

the menus without submenu stay only bold.

I mean, the menus without submenu stay bold when active but they don’t become red.

Change the above to:

@media screen and (min-width: 800px) {
    .site-navigation .menu > li.current-menu-item > a, 
    .site-navigation .nav-menu > li.current-menu-item > a, 
    .site-navigation .menu .current-menu-ancestor > a, 
    .site-navigation .nav-menu .current-menu-ancestor > a {
        color: #E02F15;
    }
}

Should do the trick ??

perfect, thanks!