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.
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.
Next we’ll take a look at changing the background, hover & text colors of each menu item.
Was This Tutorial Helpful?