Docs

[nicolaticola]

Hi Support,

I’m trying to add in different menu hover colours for both the header and footer menu.

i.e menu items – Venture = hover colour #ffff28, Innovate = hover colour #98e9fe etc.

I’ve looked for ‘accent’ under >edit category, but this seems to have disappeared in my version (I’m up to date).

Could you help me with this?

Thanks, Nikki

[Darshana]

Hi Nikki,

Thanks for writing in! To assist you with this request, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[nicolaticola]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials. You can do this by using menu item ids, for example for the first one, add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

#menu-item-26 a:hover {
    box-shadow: inset 0 4px 0 0 #ffff28;
}
#menu-item-26 a:hover span {
    color: #ffff28 !important;
}

Similarly use menu item ids and change the colors for rest of the menu items, you can find out menu item id by inspecting the element (see attached)

[nicolaticola]

Thank you, Nabeel.

That worked perfectly.

One more question… When you click on a menu item, and into a category then the colour remains the colour selected in the theme, rather than the new hover colour (image attached).

Is there a way of changing this so that the colours follow through?

Thanks, again.

[Jade]

Hi Nicola,

I can’t seem to replicate what you are describing.

When I click on a menu item, the text color seems to match the hover colors.

Kindly try to clear your browser cache and reload the page.

Thank you.

[nicolaticola]

Hi Jade,

Thanks for the reply.

The text colours do change when hovered over… but when I’m in a category the menu colour doesn’t sit as the hover colour. I’ve attached two images – one where I’m hovering, and one where I’m not. The colour sets back to the colours that are set in customizer…

Is that a way to set it so that the colours follow through?

Thanks, Nikki

[Paul R]

Hi,

You need to add the current menu item in your css code.

eg.

#menu-item-23 a:hover,
#menu-item-23.current-menu-item a {
   box-shadow: inset 0 4px 0 0 #98e9fe;
}
#menu-item-23 a:hover span,
#menu-item-23.current-menu-item span {
   color: #98e9fe !important;
}

Kindly do the same for others.

Hope that helps.

[nicolaticola]

This worked great.

Thanks for the brilliant support!

[Rahul]

Glad we were able to help you out and thanks for your kind words. 🙂

Let us know if we can help with anything else.

[Author]

Posts