Skip to content

Change the color of JUST ONE WordPress menu entry

by Web Designers Academy | Last Updated: June 15, 2019 | Subscribe to get emails

Sometimes there is a special feature or a unique page that you want to draw a bit more attention to… but how?

One way is to make just one WordPress menu entry a different color so that stands out from the rest. It’s pretty easy to change the color of just one WordPress menu entry, you need to do three things. First you need to find the navigation menu ID that your website is associating to that navigation menu entry. Second you’ll add in some custom CSS that will make that menu entry a different color. Lastly, customize the colors of that sample CSS to match your website.

Here’s a detailed explanation of each step…


BONUS: For a few examples of websites that change the menu color, checkout our Inspired section and see Postcards, Tallyfy or Jar.

STEP 1: Find the ID of the navigation menu entry you want to change

To do this, build out your navigation menu as you normally would and then visit your website on the front end. Move your mouse over the menu entry you want to change the color of and Right-click then choose Inspect (other browsers might call it something similar).

When you do that, a panel will open at the bottom of the browser (typically called the “Inspector”). It will look something like this:

Custom WP menu color CSS

Now that you know where that new panel is, you’ll also notice that there is one line that is highlighted… see it highlighted in blue? That is the underlying code of the menu item you just “Inspected”. Here’s a closer look at it:

Wordpress menu color CSS

And if you look just ABOVE that line, you’ll see the ID of the menu entry… in this example website, the ID of the menu I want to change is 36 (yours will be different):

Now that you know the ID of the menu entry you want to change, now it’s time to…


STEP 2: Add this custom CSS to change the WordPress menu color

The following CSS code needs to be added to your themes “Custom CSS” section and then slightly customized. Every theme is a little different but MOST themes will have a spot for Custom CSS in the Customizer. To find this go to Appearance > Customize and look for a section that refers to custom CSS.

.menu-item-XXX {
	background: #ff0000 !important;
	border-radius: 5px;
	color: #ffffff !important;
}

.menu-item-XXX:hover {
	background: #000000 !important;
	border-radius: 5px;
	color: #ffffff !important;
}

.menu-item-XXX a {
	color: #ffffff !important;
}

.menu-item-XXX a:hover {
	color: #ffff00 !important;
}

Once the CSS code is in the right spot, now you need to replace all four (4) instances of XXX’s with the ID of the menu entry that you discovered in STEP 1 of this post. In my example the ID was 36. So I would change each XXX to 36, like this:

Once you’ve added in the correct menu ID to that custom CSS, your navigation menu should now look and function like this:

Notice how the default button styling (red background with white text) are now different and notice how those colors change when my mouse goes over it (black background with yellow text)?

You’re almost there, the last thing you need to do is…


STEP 3: Customize the sample colors to match your website

The sample CSS was created with really ugly colors on purpose so that it will stand out and be easy for you to customize. Here’s a breakdown of what each block refers to:

  • The first block .menu-item-XXX refers to the default navigation button background color (the sample is red).
  • The second block .menu-item-XXX:hover changes the navigation button background color when the visitor moves their mouse over it (the sample is black).
  • The third block .menu-item-XXX a is the default color of the text on the button (the sample is white).
  • The fourth block .menu-item-XXX a:hover changes the color of the text when the visitor moves their mouse over it (the sample is yellow).

So everywhere you see a hex color (example: #ffff00) you need to change that to something that will compliment your website colors. You should be changing a total of six (6) hex colors, I’ve indicated them in red below:

Change wordpress menu color CSS

Once you’ve done that, your special page will stand out in your navigation menu!

SHOP CYBER MONDAY!

THE BEST DEALS OF THE YEAR ARE HERE... 33% OFF OF EVERYTHING!

Scroll To Top