Title: Menu Hover color
Last modified: August 31, 2016

---

# Menu Hover color

 *  [demented_circus_monkey](https://wordpress.org/support/users/demented_circus_monkey/)
 * (@demented_circus_monkey)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/menu-hover-color-3/)
 * Hey there, thanks for the Theme so far it’s awesome.
 * I’m trying to change the menu hover color from the primary colour of the site
   to white.
 * I’ve tried the following:
 *     ```
       .menu-item-37 a:hover {
       color: white;
       }
       ```
   
 *     ```
       #mainnav ul li a:hover {
       color: white;
       }
       ```
   
 * and about 50 other different ways.
 * If I add in background-color: white;
 * that will work and give it a new background on the hover over, however I can’t
   target the text in my CSS.
 * Some help on this would be much appreciated!
 * Thanks

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [demented_circus_monkey](https://wordpress.org/support/users/demented_circus_monkey/)
 * (@demented_circus_monkey)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/menu-hover-color-3/#post-7345595)
 * Solved.
 * Needed to use color: #FFFFFF!important;
 *  [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * (@crouchingbruin)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/menu-hover-color-3/#post-7345604)
 * Just as an FYI, it’s considered poor programming practice to [indiscriminately use the `!important` clause](http://www.impressivewebs.com/everything-you-need-to-know-about-the-important-css-declaration/).
   Many people use it because they can’t figure out how to [make the selector more specific](https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/).
 * In your example, you started off correctly, you copied the existing rule and 
   changed the color value:
 *     ```
       #mainnav ul li a:hover {
          color: white;
       }
       ```
   
 * One of the reasons why it might not override the existing rule is that your custom
   CSS comes in before the rule that’s in effect. That is, most custom CSS plugins
   will put their stylesheets after the theme’s style.css file, which is fine in
   most cases. The way that CSS works is that if there are two rules with identical
   specificity, then the rule which comes last takes precedence.
 * However, there are some themes which add a separate inline stylesheet in addition
   to the style.css file, and if the rule that you are trying to override is in 
   there, and the plugin’s CSS comes before that inline stylesheet, the rule in 
   the inline stylesheet will take precedence. To override the rule, then, you need
   to make the selector of your new rule more specific.
 * So, to get back to your problem, the best practice says that you should just 
   add enough specificity to your new rule to override the exiting rule. Adding 
   the `!important` clause is overkill, it really only needs to be used to override
   inline styles, or if the property you are trying to override has the `!important`
   clause already in it. You can try modifying your rule like this:
 *     ```
       nav#mainnav ul li a:hover {
          color: white;
       }
       ```
   
 * That is, add the `nav` element name to `#mainnav` ID (note that there is no space
   between them since they are the same element), and that will add 1 point to the
   specificity. That should be enough to override the existing rule.

Viewing 2 replies - 1 through 2 (of 2 total)

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

 * ![](https://i0.wp.com/themes.svn.wordpress.org/sydney/2.68/screenshot.png)
 * Sydney
 * [Support Threads](https://wordpress.org/support/theme/sydney/)
 * [Active Topics](https://wordpress.org/support/theme/sydney/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/sydney/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/sydney/reviews/)

## Tags

 * [menu hover](https://wordpress.org/support/topic-tag/menu-hover/)

 * 2 replies
 * 2 participants
 * Last reply from: [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/menu-hover-color-3/#post-7345604)
 * Status: not resolved