How to highlight the current menu item

Knowledgebase Docs » UberMenu 2 » Common Customizations
USEFUL? 7
UberMenu 2

UberMenu implements all of the standard current menu item classes, so you can target and adjust those properties via custom CSS . You can inspect the top level list items for each page using Firebug to see what is available to you at any given time.

Based on menu hierarchy

These are the standard class options available based on the menu hierarchy:

.current-menu-item
.current-menu-parent
.current-menu-ancestor

Current Menu Item

To highlight the current menu item red (regardless of level), you could use this style, for example:

#megaMenu ul.megaMenu li.menu-item.current-menu-item > a,
#megaMenu ul.megaMenu li.menu-item.current-menu-item > span.um-anchoremulator{
   color:red;
   background-color:blue;
}

Depending on where you put your code, you may need to employ the !important flag.

Ancestor of current menu item

To highlight the top level item when either that item or a submenu item is selected, use

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-parent > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-parent > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-ancestor > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-ancestor > span.um-anchoremulator{
   color: red;
   background-color:blue;
}

Based on Page Hierarchy

These are the classes available, and would be used in the same way as above:

.current-page-parent
.current-page-ancestor

For example:

#megaMenu ul.megaMenu li.menu-item.current-page-ancestor > a,
#megaMenu ul.megaMenu li.menu-item.current-page-ancestor > span.um-anchoremulator{
   color:red;
   background-color:blue;
}

The same structure works with other hierarchical custom post types, e.g. `current-{custom-post-type}-ancestor`.

More Information