Blog: WordPress
Closeup of HTML

Add CSS Classes To Menu Items In WordPress

Updated November 17th, 2020
•
20 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 SEO.

Website Facebook Twitter LinkedIn Instagram YouTube

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!

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

Here are more articles on WordPress you might like.

20 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

  9. I have a technology blog, and I’ve spent over an hour to do that without having to use any plugins….
    Thank you very much seriously!

    Reply

  10. This solution doesn’t work when you want to track click using Google Tag Manager. For that, the classes need to be attached to the anchor tag.

    You should extend your post by giving a solution for that.

    Reply

    1. Hi Okoth:

      Thanks for your feedback, apologies that it wasn’t what you were looking for. In WordPress, list-items (li) in the main navigation usually have the class of menu_item. This was not to mislead about adding CSS class names to the a tags.

      I know that sometimes classes can be used to track clicks, more often ID attributes are used on the anchor tag.

      One thing you can do to target a specific a tag in the menu (like a “Contact Us” link) is to get the specific CSS selector path. You can open Chrome, right-click on the link and select “Inspect” to open the Dev Tools. Navigate in the HTML to the desired link, and and select Copy > Selector. This will allow you to Paste the exact CSS selector path to the link you want to track.

      Thanks,
      -John

      Reply

Join the Conversation

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