Add CSS Classes To Menu Items In WordPress
Every once in a while, you might run into a situation where you want to add a CSS class to a specific link in your WordPress navigation menu.
Let’s say you want to make one link in your navigation stand out from the rest, and make it a call to action button.
You could do this by adding a CSS class to the li element enclosing that link, and giving it custom styles.
But how would you add a CSS class to just that link?
One thing many people don’t know is WordPress hides a lot of features under the Screen Options tab at the top of each screen in the back-end (admin) area.
To add CSS classes to a WordPress menu, first go to Appearance > Menus in your WordPress theme.
Next, find the Screen Options tab at the top right of the screen. Click to open the panel, and check the box labelled CSS Classes.
Select the menu you want to edit, and click the link you want to add a CSS class to. You should see a field that wasn’t visible before called CSS Classes (optional).
Add the CSS class to your link, and save the menu.
In the screenshot above, we added the class home-link to the link to our Home page. This is what our menu will look like now.
<ul>
<li class="home-link"><a href="http://yourwebsite.com/">Home</a></li>
<li><a href="http://yourwebsite.com/about/">About</a></li>
</ul>
You can then add the appropriate CSS rules to your style sheet.
Congratulations, you have just added custom styles to a specific link in your WordPress menu!
Hey man, I have a problem with this… I’ve seen most posts and people suggesting to do it this way, but when I go to my screen options at the top of the page I get no checkbox for CSS classes… Any ideas?
Hi Cato:
What’s your site? And what theme are you using? Is this a self-hosted website?
I’ve never heard of that checkbox not being present on the Screen Options of the Appearance > Menus screen, but it’s possible the theme might have something to do with it.
Thanks for the info. Can I add multiple classes to WorPpress menu items? How can I do that?
Hi Aswani:
Yes, you can add multiple CSS classes to menu items in WordPress. Simply add them as described in the post above, with a space separating each class name.
Thanks,
John
I’m thankful for this post, John!
Best regards,
Helder
Thanks Helder!
Thank you, this solved the exact problem I had with not knowing where the menu item custom CSS control was. Thanks for point this out, but more importantly for taking the time to share your knowledge.
Happy to be of service, Robert.
I have done the same in your post. But CSS not updating to the menu.
Hi Fahad:
It’s difficult to know what is going on without looking at the code of the theme. It may be that your theme strips out any added classes (low probability), or you may have a caching problem (high probability).
I would make sure that the server or your browser are not caching an old version of the pages.
Thanks,
John
Hi John, thank you for sharing this interesting and very useful tips. I will try to add it to my WP blog and websites.
Thanks Taman.
Hi
Thanks for letting us know how to add CSS to a menu item. I have question how to find out where that particular CSS class resides? Which file or location needs to be changed?
Danish
Hi Danish:
If you are customizing the CSS, in most themes, you can write a rule in the
style.cssfile. In some themes, you can also go to Appearance > Customize > Additional CSS and write a rule to override the styling for the menu.If you need a resource for writing a CSS rule that will override any existing rules, here is a good page on CSS specificity.
– John