Blog: WordPress
Closeup of HTML

Add CSS Classes To Menu Items In WordPress

By
•
Updated August 27th, 2020
•
16 Comments
Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

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.

Screenshot of the Screen Options panel open in the Menus screen of a WordPress admin area

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).

Screenshot of a WordPress menu being edited, with a specific link panel open

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!

Share1
Tweet
Share
1 Shares
Tags: , , Originally Published: January 14th, 2016

Join the Comments

Avatar for John Locke

John Locke is a SEO consultant from Sacramento, CA. He helps manufacturing businesses rank higher through his web agency, Lockedown Design & SEO.

Here are more articles on WordPress you might like.

16 comments on “Add CSS Classes To Menu Items In WordPress”

  1. 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?

    Reply

  2. 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.

    Reply

    1. 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

      Reply

        1. Hello Pankaj:

          If you are aksing how to target the link inside a list item in a navigation menu, you can use CSS to do that. If a given menu li has a class of cta, you can target like this:

          
.main-navigation li.cta a {
    background-color: orange;
    color: #fff;
    padding: 6px 14px;
}

          If you are talking about adding a CSS class to a link in the main content, you can edit it as HTML or in Classic Editor mode to add that class.

          Thanks,
          John

          Reply

  5. 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.

    Reply

    1. 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

      Reply

  8. 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

    Reply

    1. Hi Danish:

      If you are customizing the CSS, in most themes, you can write a rule in the style.css file. 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

      Reply

Join the Conversation

Your email address will be kept private. Required fields marked *.