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
2. Under Show advanced menu properties, check CSS Classes
3. Now expand any menu item to reveal the CSS Classes (optional) 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.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
Hi,
Is there a way to add the class to the [a] tag and not to the [li]?
Navid
No, but you can always still select the anchor with li.myClass > a, as shown above.
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.
Pingback: Applying Specific class to li tag in WordPress | BlogoSfera
Pingback: Adding event colour to your menu | Event Organiser
Pingback: How to Add a Custom Class to a WordPress Menu I...
Pingback: Displaying Categories Dynamically with UberMenu: Writing an auto-population shortcode | SevenSpark
Pingback: The Web Princess - Social Media Icon Menu