Menue items are all highlighted

Hello,

The links “KONZERTE”, “RAHMENPROGRAMM” and “NEWS” get highlighted from the theme (not “Page scroll to id”).

It’s common for WordPress themes to highlight the current page link(s) and because these links point to sections within the page (i.e. the current page), they get highlighted.

The CSS rule in ...dynamik-gen/theme/dynamik-min.css that does this is:

.menu-primary li.current_page_item a, .menu-primary li.current-cat a, .menu-primary li.current-menu-item a {
    background: #000000;
    border-top: 0px solid #EEEEEE;
    border-bottom: 0px solid #EEEEEE;
    border-left: 0px solid #EEEEEE;
    border-right: 0px solid #EEEEEE;
    color: #F5A590;
    text-decoration: none;
}

So, the best way to deal with this is the following:

1.Go to “Page scroll to id” settings and set the “Highlight selector(s)” option to:

.nav-primary .menu-item a

and click save changes.

This instructs the plugin to highlight only the links in your menu.

2.Add the following CSS in your theme (e.g. in appearance > customize > additional css):

.menu-primary li.current_page_item a._mPS2id-h, .menu-primary li.current-menu-item a._mPS2id-h{
    color: #fff;
}

.menu-primary li.current_page_item a._mPS2id-h.mPS2id-highlight-first, .menu-primary li.current-menu-item a._mPS2id-h.mPS2id-highlight-first{
    color: #F5A590;
}

This resets the (unwanted) theme highlighting for the menu links that point to sections within the page (i.e. the links that are handled by “Page scroll to id”) and also highlights the “Page scroll to id” links while the page is scrolling.

Note that we use the mPS2id-highlight-first class instead of mPS2id-highlight, because this way we highlight only 1 link each time.

That’s it.

You can also remove the rule you added:

.mPS2id-target .mPS2id-highlight{
    color: #F5A590;
}

as it’s not needed.

Let me know if it works 🙂

• This reply was modified 6 years, 3 months ago by malihu.