highlight css problem

Hello,

The correct CSS should be:

#primary-menu.main-nav a.mPS2id-highlight {
	color: #FBBE4D;
} 

The second CSS rule you have is not needed as there’s no #sticky-navigation in your page.

Also, go to plugin settings and disable the “Keep the current element highlighted until the next one comes into view” option.

Let me know ??

thanks mailhu,
for the super fast reply!
i tried your code and it works e.g. on the blog page, but it does not on homepage/front-page.
there all links are red and not only the one of the clicked section…
kind regards!

ps (edit): interestingly the “hover” color doesn′t work, too, so perhaps i have to ask GP support!

No problem ??

To reset the theme’s highlight and keep “Page scroll to id” scrolling and hover highlight, add the following to your CSS:

.main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
	color: #FBBE4D;
}

Also, since you don’t need to highlight the mobile menu links, you should change the “Selector(s)” option in plugin settings to:

#primary-menu a[href*='#']:not([href='#'])

dear malihu,
thanks for all your help. we are getting there – but still a tiny way to go ??

the hovering works now, but the color does not change when scrolling through the one pager and does not stay highlighted, when the menu-item is selected. what can cause the problem?

and please clarify for me the “selector(s)” option: should i put your code in the the “selectors are excluded” box?
kind regards and many thanks again!

No, not in the “selectors are excluded” box. You change the first “Selector(s)” field from:

a[href*='#']:not([href='#'])

to:

#primary-menu a[href*='#']:not([href='#'])

Change this option, save changes and let me know so I can check it again.

thanks for clarifying, i just changed it! many thanks!

OK try one more thing:
In plugin settings disable “Allow only one highlighted element at a time” option.

YEEESSS!!!
removing th “allow only one highlighted element” did the trick!

thanks a million! all the best!

• This reply was modified 5 months, 4 weeks ago by tiggerkater.

ps: on another onepage i have again problems with the “hover” attribute. should i open a new topic to send you the site-link?
thanks again for your support (just gave you a well deserved 5 star review.)

Thanks for the review ??

No need to open a new topic. Tell me which page you want to me to check ??

its this page: https://www.kochtafelkultur.at/
the highlighting works perfectly, but hovering does not work. the color is set in the theme editor, but if i enable your css from above,

.main-navigation .main-nav ul li[class*="current-menu-"] > a:not(:hover):not(.mPS2id-highlight){
	color: #FBBE4D;
}

hovering does not work and also highlighting is somehow “disturbed”.
so perhaps the wrong selector. but i cant figure out the problem…. (my tiny css skills ??

No problem ??

Not sure if this is the color you want for the hover but you can simply do this:

#primary-menu.main-nav a:hover {
    color: #A71B18;
}

Let me know ??

thanks malihu,

it works, as it should.
Interesting to know would be for me: why does the (hovering) color/scheme selected in the customizer not work, and the costum css does?
thanks again for all your help, best horst

You’re welcome ??

Sometimes we need to override some CSS rule with another one. Selecting a color in the customizer adds a CSS rule to the document but another plugin or some other CSS might override it. In such cases we need to override it again ourselves with another rule.

thanks malihu for clarifying,
so i will try to do this in the future as a first step.
and thanks again for all your help and great support!
kind regards!