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!
Hey Anita,
I’ve been meaning to come check out your site for a while and love it. This is such a helpful tutorial I remember searching all over the internet puling my hair out and here you have it, so simplified. How would you add an icon, say for the home tab? Thanks
Thanks Chrissy! Are you using an HTML5 theme or a non-HTML5 theme? Brad Dalton did a tutorial on adding icons to the nav menu here. I don’t want to recreate the wheel on this, so take a look at this and see if this helps you.
It’s a theme from Pixelista. I love Brad’s tutorials and will take a look. Thanks 🙂
Okay, I am familiar with her themes. I used to provide support for some of those last year. If Brad’s doesn’t work out, let me know!