How to Colour Menu Items Differently in WordPress

There might come a situation where you want to have one or two menu items/pages a different colour to the rest as I’ve done with my “Blog” link on this site. You might want to highlight or draw attention to one particular section or even just have every item a different colour for variety!

Here’s a quick how to on how to do it.

View your website in Chrome for example and right click on the menu item in question and choose “Inspect Element”. We’re looking for the “menu item id” so that’s “menu-item-1975” for my Contact Me menu item.

Menu Item Colour

You now need to add some new CSS to your theme’s stylesheet “style.css”. Add this line for a red highlight:

.menu-item-1975 a {color: #C30;}

or, to give a new background colour:

.menu-item-1975 a {background-color: #C30;}

Leon

Published by

Leon Quinn

Multimedia Design company in Leitrim, Ireland specializing in WordPress Website Design, Photoshop and Graphics. www.reverbstudios.ie

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.