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

Click the Screen Options tab

2. Under Show advanced menu properties, check CSS Classes

Check CSS Classes option

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

CSS Classes text input

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

/* Target the menu item LI in UberMenu */
#megaMenu ul.megaMenu li.myClass{

}
/* Target the menu item Anchor (link) in UberMenu */
#megaMenu ul.megaMenu li.myClass > a{
  /* Colors, font sizes, would go here */
}

Remember that you may need to increase your selector specificity or 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.

Share
Share on FacebookTweet about this on TwitterShare on Google+Pin on Pinterest

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.