How to Add Color to One Menu Item?

There are literally thousands of WordPress themes – which means that many people won’t be familiar with your particular theme. So a link to your site where people can see the theme might result in more responses.

https://safemoneyproducts.com

Thanks, Esmi.

Which menu item do you need to highlight?

The tab on the far right that says “MEMBERSHIP.”

You need to assign a class with a background color to the list item “Membership” .

“You need to assign a class with a background color to the list item “Membership”.

I apologize for my ignorance, but what’s a “class,” and how do I use it to assign a background color? Is there documentation I could read? You can tell I’m no programmer, so think of this as leading the blind.

There are loads of documentation about that. Just google for “CSS”, “Classes” and “background-color”.

Basically you have to edit your style.css file and create a new class .featured (or so). Then you give the class a background-color, like this:

.featured {background-color: #ff0000;}

Then you need to edit your header.php file and find the code for the navigation bar. The class you just created needs to be assigned to the last list item.

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="featured">last item</li>
</ul>

So yeah, that’s basically how it works but when you have only little experience with css/html you should definitely read some tutorials first. Otherwise it can be a little frustrating…

You need to assign a class with a background color to the list item “Membership”

I’m sorry but that’s rubbish! wp-nav_menu already generates all of the ids and classes needed.

@bobover3: Try adding:
.nav #menu-item-1702 a {color: #c00;}

to the bottom of your theme’s style.css file. That will turn the text of the Membership link red. It may not be exactly what you want but it should get you started.

I’m sorry but that’s not rubbish. If you want to highlight a menu item (and not just the color of the font) why not doing the navbar by hand, assigning a class and that’s it. Its not mandatory to use wp-nav_menu…

You can style the background using the same CSS rule and just a different property.

Esmi, you saved the day once more! I followed your instructions, and it worked perfectly. You’re a genius and a saint!

Thank you so much!

Glad I could help ??

Hey Esmi,

This works. I have one more question:

How do I add a css background to a specific “current-menu-item”? I am using twenty-eleven and I tried using the code below but didn’t work.

#access  .current-menu-item .menu-item-48 a{
	color: white;
	background:#384e66;
}