How to Style One or More Menu Items (or Submenus) Differently

Heads up!

This archived doc is for an old version of UberMenu.

For the current documentation, please visit the UberMenu 3 Knowledgebase

Please remember that customizations are not included in support. This FAQ is here to explain best practices, but you will need to implement the changes yourself

Note: in UberMenu 3 you will be able to change colors via the menu item settings without writing custom CSS. The beta is available in the forum if you’d like to check it out.

Styling an individual menu item

Just want to style a single menu item? Every item has an ID, and you can target that item by its ID. Just open up Firebug or Chrome Developer Tools and inspect the menu item in question. The ID is attached to the list item (LI). To style the menu item, use this selector template, replacing menu-item-100 with the ID of your menu item:

/* Menu Item with links */
#megaMenu ul.megaMenu li#menu-item-100 > a{
    /* place style properties here */
}

/* Menu Item with links disabled */
#megaMenu ul.megaMenu li#menu-item-100 > span.um-anchoremulator{
    /* place style properties here */
}

/* Menu Item Link on Hover */
#megaMenu ul.megaMenu > li#menu-item-100:hover > a, 
#megaMenu ul.megaMenu > li#menu-item-100 > a:hover, 
#megaMenu ul.megaMenu > li#menu-item-100.megaHover > a{
    /* place style properties here */
}

Right click the menu item
Select Inspect Element
Click on the containing li within the web inspector
Read the ID, which looks like id="menu-item-##"

Styling a group of menu items

Via highlighting

One easy way to accomplish styling a group of menu items is to use UberMenu’s “Highlight” option for those menu items. You can customize the highlight style with this selector template:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > span.um-anchoremulator {
   color: tomato !important;
}

Via Custom Classes

Want to pick and choose which menu items have your special styling? Add a class! This is a default WordPress menu feature. Just add your special class to each menu item you need styled differently, and style that CSS class however you like.

Here are details on Adding a custom class

#megaMenu ul.megaMenu li.menu-item.mycustomclass > a, 
#megaMenu ul.megaMenu li.menu-item.mycustomclass > span.um-anchoremulator {
   color: tomato !important;
}

Styling an entire level of menu items

Want to change the way an entire level of menu items looks, like the whole top level, or all submenu headers? You can get all the style selector templates you need by using the UberMenu Customization Assistant

Styling a specific Submenu

You can target a specific submenu with the same technique. Just find the ID of the parent menu item in the top level, then use this selector format:

#megaMenu ul.megaMenu > li#menu-item-100 > ul.sub-menu{
   background:tomato;
}

You can use the class technique as well.