Change SF Menu Font Hover Colour

I would like to change just the menu (the sf menu, not top navigation menu as have disabled that) font hover colour. At the moment it’s the default turquoise colour but would like to change it to #800000. Can someone please let me know the custom css to do this or where in the stylesheet to change it.

The website is http://newsite.amd-sussex.org.uk/

Thank you

Hello @rachelsme,

Can you please provide explanatory screenshot? You can upload screenshot to your WordPress Media Library and share a link, or you can use one of the online screenshot services.

Kind Regards, Roman.

Hi Roman,

Thanks. Here’s the link for the screenshot - http://newsite.amd-sussex.org.uk/wp-content/uploads/2016/12/screenshot.jpg

So as you can see the menu background is green with white text which is what I want, but when a page is selected or you hover over the menu item, the font turns turquoise and I’d like to change the colour of this.

Rachel

Hello Rachel,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#main-navigation li.current-menu-item > a {
    color: white;
}

#main-navigation li.current-menu-item > a:hover {
    color: #800000;
}

#main-navigation li a:hover {
    color: #800000;
}

Kind Regards, Roman.

Hello Roman,

Thank you, that has changed the hover font colour. One issue I still have though is that whichever page is loaded up, that page on the menu is still the turquoise colour. If you look at the site now, viewing the home page, you will see ‘home’ in the menu in he turquoise colour. How do we change this to the #800000 colour code too?

Hello Rachel,

It looks like you got > instead of > characters in that code.

Can you please correct it and see if it helps?

Kind Regards, Roman.

Hi Roman,

Thanks, that has worked for the selected page font colour in the menu. One thing is hasn’t fixed is the colour of the menu item that has a sub-menu. Look at my menu at LINKS, when the drop down menu pops up LINKS is still turquoise, how do we amend that?

Rachel

Okay Rachel,

Please try to use this CSS code instead of previous:

#main-navigation li a {
    color: white !important;
}

#main-navigation li a:hover {
    color: #800000 !important;
}

Please let me know if you need more help.

Kind Regards, Roman.

Thank you Roman,

It’s all good now.

I really appreciate the help.

Rachel

You are welcome Rachel!

Kind Regards, Roman.