• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Change Navigation Menu Item Link Hover Colors in 2012

First step is to right click you home page and View Source Code.

You can find each nav menu item i.d in your source code and add a color to style each item.

nav menu item source code

Add this CSS code to your CSS Stylesheet Editor or child theme’s style.css file

Change Menu Item Link Hover Color

#menu-item-12345 a:hover {
color:red;
}
#menu-item-54321 a:hover {
color:yellow;
}
#menu-item-12312 a:hover {
color:blue;
}
#menu-item-54354 a:hover {
color:orange;
}

This code changes the color of the text in each menu item when you hover over with your mouse.

  • Simply replace the menu item i.d’s with your own.
  • Change the color of each menu item link to match your own site.

Need help choosing colors? Try one of the popular color tools or choose a hex code color.

Nav Menu Link Hover Color

Next we’ll take a look at changing the background, hover & text colors of each menu item.

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.