[Resolved] Problems with Mouseover in Primary Menu

[Samuel]

I have set a color for the mouseover in the primary menu. If I insert a static page into the menu, it works fine (See AGB). On mouseover the purple comes. But if I set an individual link with an anchor (for example https://url.de/#anchor), then I don’t get this mouseover effect (all other links).

[Fernando]

Hi Samuel,

The other menu items are links from the current page, and to alter the colors of the Primary Nav for links as such, you would need to change the last column in Appearance > Customize > Colors: https://share.getcloudapp.com/NQuNvL9J

You’ll see this behavior in the AGB Page, where the current-page is AGB, thus following a different color value from the customizer: https://share.getcloudapp.com/X6uEDqLW

Hope this clarifies. 🙂

[Samuel]

Hi Fernando,

thanks, this is what i have: https://www.screencast.com/t/YmIg8cD3em2

So the current color should be neutral right? When i am at the home page the mouseover still not work. Only at the site AGB.

[Samuel]

the big goal is this: i want to link to anchor from the main menu. So I could also just put “#kontakt” in the link target. Then I wouldn’t have the mouseover problem anymore. BUT: then I have another problem. Assuming I’m on another page, the anchor doesn’t work properly anymore. The anchor is only on the start page. Is there a better solution?

[David]

Hi there,

do you want no Current background color ? For any items ? Let me know as we will need to use some CSS to overcome the current-menu-item colors.

[Ying]

Hi Samnuel,

Try this CSS:

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a, .main-navigation .main-nav ul li[class*="current-menu-"]:focus > a, .main-navigation .main-nav ul li.sfHover[class*="current-menu-"] > a {
    color: var(--accent);
}

[Samuel]

Hi David and Ying.

Perfect!

Only one } is missing. THANKS!!

.main-navigation .main-nav ul li[class*="current-menu-"]:hover > a, .main-navigation .main-nav ul li[class*="current-menu-"]:focus > a, .main-navigation .main-nav ul li.sfHover[class*="current-menu-"] > a {
    color: var(--accent);
}

[Ying]

Oops, sorry there’s actually one { too much not missing 🙂

I updated the CSS here:
https://generatepress.com/forums/topic/problems-with-mouseover-in-primary-menu/#post-2158158

[Samuel]

Thanks!!!

[Ying]

You are welcome 🙂

[Author]

Posts