[Resolved] Menu Hover Text

[Chris]

Hi guys!

I’m loving the theme, thank you! One quick question though – I’m building a website with a navigation menu featuring 5 page links. Only one of these links goes to a separate page, with the others scrolling straight to different sections of the home page.
The text colour hover function only works when hovering over the link to the seperate page, not when you hover over the ones that scroll to a different section of the home page – is there a way to make the hover function work across all the menu tabs?

Thanks in advance for any advice!

[David]

Hi Chris,

can you share a link to the site?

[Chris]

I tried but it wouldn’t let me? Maybe because it’s a .co address? I don’t really want to detail the link in public yet as it’s not finished and being built in a ‘live’ environment. Can i email the link to you?

[David]

Hi Chris, you can share it via contact here, just use the pre-sales contact form and if you wouldn’t mind just post the link to this post.

[Chris]

Done – hopefully gets to you okay!

[David]

Hi Chris, ok it’s due to WordPress treating all menu items on that page as Current Page Items, so the current color is overriding the hover.

Can you try setting the links as Custom Links. WP should ignore them as current page then.

[Chris]

Thanks for the reply, David. That’s the bit that’s really confusing me; they are set as custom links going to a full URL rather than just same section on the same page, if that makes sense.

Any other suggestions I can try?

Many thanks,

Chris.

[Leo]

What if we give current menu item a hover color as well?

.main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
    color: #f669a5;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Chris]

Hi Leo – thanks. Unfortunately that makes most of the menu pink with black text on hover, however the main issue is that the separate page (i.e. services) remains black with pink on hover (which is what I need across all the menu items; black text with pink on hover). Any tweaks to this CSS you could suggest?

Thanks.

[Leo]

Made a mistake on before. Can you give the code another shot?

[Chris]

Perfect Leo – thank you for your help.

[Leo]

No problem!

[Author]

Posts