Menu Item Hover Color

[Richard Geist]

Site: http://cambodianscholars.org

Wordpress 4.3.1
United Version: 1.1.3

We are using a child theme.

In Appearance > Theme Options > Styling, We have chosen to use “Normal WordPress Menu”.

Under “Navigation Bar”, we set the following:

Navigation Bar Color : #54185a
Navigation Item : #ffffff (color of your navigation menu items)
Navigation Item (hover) : #799555 (color of your navigation menu items while hovering)

THE PROBLEM
That hover color changes the menu item background color, NOT the menu item text.

Currently, the menu item hover color is a dull red: #a5232d

I have looked through United CSS, but am unable to pinpoint a menu item hover color (probably my confusion).

QUESTION:

What CSS element controls the menu text hover color?
Knowing this, it would then be an easy matter to add to custom CSS.

Is there a solution that I’m NOT considering?

Thanks in advance for any help.
Dick Geist

[Bill Robbins]

Hi Dick,

Sorry for the trouble there. You can change the hover and current styles via some custom CSS. Here’s one way to approach that:

1. Go to your theme options page and choose the Style tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header-content ul#top-menu li a:hover {
   	color: #000000;
   	background-color: #ffffff;
   }
   
   #header-content ul#top-menu li.current-menu-item a,
   #header-content ul#top-menu li.current-menu-item a:hover {
   	color: #000000;
   	background-color: #cccccc;
   }
   
   

   The top style would set the hover state of your menu items, both the text (color) and background (background-color). The second style would set the current menu item. Feel free to change those colors to match what you’re looking for.

3. Update your settings.

See how that works for you. Let me know if you have any questions.

Thanks,
Bill

[Richard Geist]

That did the trick.
Thanks, Bill

[Bill Robbins]

Glad that helped out Richard. Let me know if you need anything else.

[Author]

Posts