How to Add a Custom Class to a WordPress Menu Item

Get acquainted with this very useful core WordPress feature that many users aren’t aware of, since it’s hidden by default.

Written by

Chris Mavricos

Published on

BlogHow To · WordPress · WordPress Tutorials

This is a question I get a lot related to UberMenu – WordPress Mega Menu Plugin, though it’s actually baked into WordPress Core. It’s a very powerful feature, as it allows you to target either a single menu item or a group of menu items with a single class. However, the option is hidden from the UI by default. In order to add a class to a menu item, you first have to reveal it.

1. In Appearance > Menus, click the Screen Options tab

WordPress Menu Screen Options Button

2. Under Show advanced menu properties, check CSS Classes

WordPress Screen Options - CSS Classes option

3. Now expand any menu item to reveal the CSS Classes (optional) text input.

WordPress Menu Item CSS Classes

4. Enter your class name and save your menu to apply the class to the menu item

The class will be added to the LI (list item) element, the same element that has the menu item ID attached. You can then style your item like this, where .menu is replaced by the class used for your menu:

/* Target the menu item LI */
  /* Margin might go here */
/* Target the menu item Anchor (link) */
.menu > a{
  /* Colors, font sizes, would normally go here */

/* Target the menu item LI in UberMenu */

/* Target the menu item Anchor (link) or span (link disabled) in UberMenu */
.ubermenu > .ubermenu-target{
  /* Colors, font sizes, would go here */

Remember that you may need to increase your selector specificity (or in rare cases use the !important flag) in order to ensure that your new styles are applied.

5. Enjoy even more customization control over your menu!

Note that this is a standard WordPress feature and works with or without UberMenu. If you need more control in UberMenu, UberMenu provides the ability to add Anchor Classes & IDs to your menu items

Chris Mavricos

Hi, I'm Chris. I'm a web developer and founder of SevenSpark located in Boulder, CO. I've been developing websites since 2004, and have extensive experience in WordPress theme, plugin, and custom development over the last 15+ years.