How to Add a Custom Class to a WordPress Menu Item

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 */
.menu li.my-class{
  /* Margin might go here */
}
/* Target the menu item Anchor (link) */
.menu li.my-class > a{
  /* Colors, font sizes, would normally go here */
}

/* Target the menu item LI in UberMenu */
.ubermenu .ubermenu-item.my-class{

}
/* Target the menu item Anchor (link) or span (link disabled) in UberMenu */
.ubermenu .ubermenu-item.my-class > .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

8 thoughts on “How to Add a Custom Class to a WordPress Menu Item

  1. Thanks! I was looking around trying to find out how to add classes to individual menu items. Funny that this setting was sitting under my nose the whole time! Thanks for the post. I just wish I had known this before my last project. I actually hijacked the “title” attribute and used some PHP hackery in the theme to apply a class based on what the title was set to.

  2. Pingback: Applying Specific class to li tag in WordPress | BlogoSfera

  3. Pingback: Adding event colour to your menu | Event Organiser

  4. Pingback: How to Add a Custom Class to a WordPress Menu I...

  5. Pingback: Displaying Categories Dynamically with UberMenu: Writing an auto-population shortcode | SevenSpark

  6. Pingback: The Web Princess - Social Media Icon Menu

Comments are closed.