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;}