Sticky Special Classes

Entire Menu

ubermenu-sticky

When the menu is in the sticky state, it will be wrapped in this class. To write styles specifically for the sticky state of the menu, you can prefix your selectors with

Version 3
/* Menu Bar while in sticky mode */
.ubermenu.ubermenu-sticky{

}
Older Versions
/* Menu Bar while in sticky mode */
#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky{
 
}

You can add custom CSS in your CSS Tweaks setting.

Individual Menu Items

You can use these classes to control whether individual items are visible or hidden depending on whether the menu is sticky or not.

Adding custom class to UberMenu item

um-sticky-only

The um-sticky-only class allows you to have menu items that are only displayed when the menu is sticky (they will be hidden via CSS otherwise). Simply add the class to any menu item.

One way to use this would be to add a logo to your menu that only appears after the user has scrolled past your header

um-unsticky-only

The um-unsticky-only class allows you to have menu items that are only displayed when the menu is NOT sticky, and hidden via CSS otherwise while the menu is sticky. Simply add the class to any menu item.

On this page