How to Change the Style of One Menu Item

Hey—want some one-on-one help getting this set up? Book a 20-minute consultation and we can work through it via video chat!

I can’t even begin to explain how excited I am to share this web design tip with you guys.

Sometimes you want to change one menu item on your website so it looks different from the rest. It was something I had wanted to do, but I just couldn’t figure out how.

Well, for a long time, I was convinced it was super difficult and basically impossible for me to do.

Good news: I was totally wrong. It’s actually super easy!

Why You’d Want to Change a Single Menu Item Style

First, let’s talk about practical applications of this. Why would you need to change just one menu item?

Calling Out a Specific Menu Item

First, you might want to call out a single item in your menu to get your visitors’ attention. For example, you’ll see in my menu that Start Here! is in a different color than the rest of the menu items. That’s because I want you to visit that page. I made it stand out so your eyes are drawn to it, which encourages you to click on it.

You could do this with any menu item–a start here page like I have, your shop, or even a particular category of blog posts. Call out whatever is most important to you–that way, people notice it more and are therefore more likely to click on it!

And don’t worry, this change isn’t permanent in the slightest. So, if this month you’re working on a big push for your shop, call it out! Then next month, you could go back to your Start Here page (or whatever else is your priority). It’s super easy to do, so feel free to change it around as your goals change.

Giving All Menu Items a Different Style

Another option would be to give each menu item (or even just a few of them) their own style. I originally thought of doing this with my blog post categories. I color code my blog post images based on the category (yellow for blogging, teal for design, and pink for feminism), so I wanted to have the menu items those same colors.

In the end, it ended up looking weird, but if it aligns with your brand, you can definitely make it work!

One great example of this is A Beautiful Mess. Their brand is very messy (as the name implies), so it works really well that all of their menu items have different colored backgrounds / patterns. (Plus, those styles match the style of the blog post header text! Bonus points for coordination.)

Play around with these options and see what looks the best while staying on brand. There’s so much you could do with it!

[clickToTweet tweet=”Want to change the style of just ONE menu item on your blog? @caitlinhonard will show you how!” quote=”Want to change the style of just ONE menu item on your blog? @caitlinhonard will show you how!”]

How to Change a Single Menu Item Style

Okay, now that you know why you want to change your menu item, you’ll need to figure out which one you want to change, as well as what you want it to look like.

For this tutorial, I’ll show you how I changed my Start Here! menu item from the static white text to my branded pink.

Find Out the Menu Item Number

First, you’ll need to find out the menu item’s number. To do this, set up your menu in the order you want it and go to your homepage. Right click on the menu and click “Inspect.”

You should see something like this:

By right clicking on the menu when you hit “inspect,” it should take you directly to the code for the menu. In mine, it says <div class=”main-menu-1-container”>. Yours should say something similar.

If it doesn’t take you directly to that bit of code, simply hover over different pieces of code until you find it. When you hover, the element it affects will be highlighted in blue. If you need to get more specific (that is, your menu is part of a large chunk of your page that is highlighted at the same time), click the arrow next to the bit of code so more appears underneath it. Keep going until only your menu is highlighted blue.

Once you’ve found your menu’s code, you’ll need to find the code for the specific menu item you want to change first. For mine, I want to change the first menu item (Start Here!), so I need to find that piece of code. I assume it’s the top one, but it’s best to hover over it and verify that only the Start Here! option is highlighted in blue to be safe.

Sure enough, when I highlighted the first option under <div class=”main-menu-1-container”>, the Start Here! item was highlighted in blue. The coding read <li id=”menu-item-4993″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-4993″>

The only thing we need to note from that code is menu-item-4993. Your four-digit number will be different, so make note of what it is.

Edit the CSS for That Menu Item Number

Now we’re going to add some custom CSS for this menu item. In WordPress, you access it by going to your Admin Dashboard and clicking on Appearance –> Edit CSS.

Note: this Custom CSS goes away when you change themes, so I recommend keeping a document on your computer / in the cloud that saves all of this coding in case you want to keep it when you change themes.

In my case, we want to change the CSS of this item’s text, both with and without hover. Find the CSS to change what you want (honesty time: I typically just Google it). Here’s what I pasted into the Edit CSS Tool:

/* Change Start Here! Option */

#menu-item-4993 a{
color: #ee3f62 !important;
}

#menu-item-4993 a:hover{
color: #ee3f62 !important;
}

I always make a comment (any text surrounded by /*  */ is a comment; it doesn’t get included in the coding) so I know what the bit of code actually does. In this case, it’s changing the Start Here! option, so that’s what I commented.

In your case, you’ll just need to swap out the four-digit menu item number for whatever number corresponds with your menu item.

I wanted my link to be my branded pink (hex code #ee3f62) all the time, whether or not it was hovered upon, so I used both the “a” code and the “a:hover” code. You could change the hover text / background color to be different, if you’d like.

Other elements to consider are:

background-color:
border:
text-transform:
font-weight:
font-family:

Again, do some Googling to see what all you could change. The possibilities are endless!

Note, however, that you’ll need to include !important after the color hex code, before the semicolon. This tells your website to override the existing value for the item and use this one instead.

Repeat As Needed

Now simply repeat the process as needed if you want to change the look of any other menu items. Just remember to add a comment above each menu item so you don’t constantly have to check back in the Inspect tool to see which menu item number refers to which menu item.

Easy, right? What menu item are you going to call out?