Menu Item Hover Color

Support Area Forums United Menu Item Hover Color

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://cambodianscholars.org
  • Author
    Posts
  • #34207

    Richard Geist
    Participant

    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

    #34209

    Bill Robbins
    Moderator

    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

    #34220

    Richard Geist
    Participant

    That did the trick.
    Thanks, Bill

    #34221

    Bill Robbins
    Moderator

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

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Menu Item Hover Color’ is closed to new replies.