Change the Color of One Menu Tab in WordPress

If you are using WordPress for your websites, sometimes you just want to add a little zip, zing or pizzazz to just one menu item. You can easily do that using CSS Classes that is attached in your Menus. If you’ve never seen the CSS Classes you need to open up the Screen Options tab as seen in the following image:

Open the menu item you wish to change. Add a unique name in the CSS Classes field and then Save the menu. Then go to Appearance > Editor and make sure you are in the Style.css file:

As you can see I’ve added the unique name I gave my menu item along with a color. This particular code will only color the background of the navigation only:

.sample-tab1 {
background-color: #990000;
}

But this code will provide the background color along with a color change for the fonts.

.sample-tab1 a {
background-color: #990000;
color: #ffffff;
}

Just think, if you want a menu full of RAINBOW COLORS…. you’d repeat these steps and whalla…. you’d have the rainbow!

Did you find this blog or tutorial helpful?

Like my Signature? Get the Signature Widget for Genesis right here!