Docs

[NightFox]

Hi there

Can you please help me to change the color of a specific menu items on hover text color please?

Ive been able to change the background color of the menu item, but not the on hover text color.

Thx for your help!

Currently using:

.menu-item-25:hover {
background-color: #00ad3e;
}

want to add:
color: #ffffff; to this menu item on hover to text

[NightFox]

This reply has been marked as private.

[Joao]

Hi NightFox,

On CSS Classes have a . in front while IDs have a # in front.

I couldn´t see your site, but I believe the solution you are looking for is.

#menu-item-25 a:hover {
background-color: #00ad3e;
}

Hope that helps,

Joao

[NightFox]

This reply has been marked as private.

[Lely]

Hello There,

We can update above CSS to this,

#menu-item-25 >a:hover {
    color: #ffffff;
}

Above change will make sure that the font color change on hover will be on the main menu only.

In case you just want to use the previous suggestion and just change to background color of the submenu link on hover, please use the following CSS:

.sub-menu>li:hover {
    background: red; /*Change red to your preferred color*/
}

Hope this helps.

[NightFox]

Hi thanks a lot.

Working well – how can i change the on hover menu drop down text color for this? I’ve tried:

.sub-menu>li:hover {
background: red;
color: #ffffff;
}

But it’s not working. Also added !important as well to that.

Thanks for your help.

[NightFox]

This reply has been marked as private.

[Rupok]

Hi there,

Your site is not loading anymore so can’t test but you can try this to change the color of submenu item on hover :

.sub-menu > li:hover a {
  color: #ffffff;
}

or

.sub-menu > li > a:hover {
  color: #ffffff;
}

Hope this helps.

Cheers!

[NightFox]

Unfort this is still not working – we have tried both options noted there, thank you.
I provided you with our wp-admin logins earlier -please can you take a look?

[Rupok]

Hi there,

Thanks for updating. I missed your other reply as I have posted my reply at the same time. Maybe we shouldn’t reply that fast 🙂

However the code is working but being overridden by other code. You can try this :

.sub-menu > li > a:hover {
  color: #ffffff !important;
}

Hope this helps.

Cheers!

[NightFox]

Thx got it, appreciated!

[Thai]

You’re most welcome 🙂

If you need anything else please let us know.

[Author]

Posts