Sticky Settings

Knowledgebase Docs » UberMenu Sticky
USEFUL? 5

Version 3

Activating UberMenu Sticky Extension will automatically make your UberMenu sticky, however you can use the settings panel (Appearance > UberMenu > Main Configuration > Sticky) to tweak its appearance.

SettingPurpose
Enable Sticky MenuMake this menu sticky when the user scrolls past it.
Top OffsetIf you want your sticky menu to stick to the absolute top of the window, leave this at 0. If you would like it to be vertically offset, increase the Top Spacing appropriately. If you set this to 20, the menu will stick 20 pixels from the top of the window.
Full Width Sticky Menu BarWhen enabled, when your menu sticks the menu bar will expand to the full width of the screen. If you’d rather it did not, disable this.
Enable ClearfixIf your menu immediately gets stuck to the top of your viewport even before you scroll, the most likely issue is that your theme’s header needs to be properly cleared, as the elements may be absolutely positioned. Enable this option to clear the menu and keep it in place until you scroll. You may also need to add some padding or margin to the theme’s container element.
Center Inner Menu WidthIf you have activated the Expand Menu Bar Full Width on Scroll option, you may want the menu items to still be contained within the content area of your site, rather than being aligned to the left of the window. Normally you would set this to the width of your content area.
Sticky Menu Bar BackgroundIf you are using a transparent background on your menu bar, you’ll probably want to set a color for when the menu sticks. This makes it much easier to read the text while it is overlaid over other content.

Advanced Sticky Settings – use with caution

SettingPurpose
Stick on Mobile DevicesWarning: Experimental Tested in iOS Safari and Android Chrome & Stock browsers, this setting will make your menu sticky on mobile devices and attempt to make any hidden content accessible via overflow touch scrolling. Note that the iOS implementation of overflow scrolling seems to be much smoother than Android’s, which can be unreliable at times. Overall, mobile browser support for fixed-element overflow touch scrolling is still lacking. Therefore, use at your own risk. This is an experimental feature and may not work with all sites. If not working as expected on your site, simply disable. Suggested alternative: ShiftNav.
Always StickyAlways stick the menu to the top of the page without scrolling. If you use this option, you will likely want to manually add some padding/margin to your site container, and a max-width on the .ubermenu element if you are not expanding the menu full width. Keep in mind that features like the special classes will no longer work as intended since this feature disables the javascript component of the extension. Centering will be controlled through the core UberMenu options, not the Sticky-specific options. Not recommended for use when Stick on Mobile Devices
Apply Sticky ToIf you only want the menu to be sticky on a specific page, enter the post ID here

Older versions

Activating UberMenu Sticky Extension will automatically make your UberMenu sticky, however you can use the settings panel (Appearance > UberMenu > Sticky Settings) to tweak its appearance.

Sticky Settings Panel

SettingPurpose
Top Spacing / OffsetIf you want your sticky menu to stick to the absolute top of the window, leave this at 0. If you would like it to be vertically offset, increase the Top Spacing appropriately. If you set this to 20, the menu will stick 20 pixels from the top of the window.
Expand Menu Bar Full Width on ScrollBy default, when your menu sticks the menu bar will expand to the full width of the screen. If you’d rather it did not, disable this.
Enable ClearfixIf your menu immediately gets stuck to the top of your viewport even before you scroll, the most likely issue is that your theme’s header needs to be properly cleared, as the elements may be absolutely positioned. Enable this option to clear the menu and keep it in place until you scroll.
Center Inner Menu WidthIf you have activated the Expand Menu Bar Full Width on Scroll option, you may want the menu items to still be contained within the content area of your site, rather than being aligned to the left of the window. Normally you would set this to the width of your content area.
Menu Bar BackgroundIf you are using a transparent background on your menu bar, you’ll probably want to set a color for when the menu sticks. This makes it much easier to read the text while it is overlaid over other content.
Move WP Admin Bar to FooterThe WordPress Admin Bar is also a sticky menu. If you have both at the top, they will overlap and one will become inaccessible. This setting moves your Admin bar to the bottom of the page and inverts its menus. (As an alternative, see How to use both the Sticky and the Admin Bar at the top of the page)

Advanced Sticky Settings – use with caution

SettingPurpose
Stick on Mobile DevicesWarning: Experimental Tested in iOS Safari and Android Chrome & Stock browsers, this setting will make your menu sticky on mobile devices and attempt to make any hidden content accessible via overflow touch scrolling. Note that the iOS implementation of overflow scrolling seems to be much smoother than Android’s, which can be unreliable at times. Overall, mobile browser support for fixed-element overflow touch scrolling is still lacking. Therefore, use at your own risk. This is an experimental feature and may not work with all sites. If not working as expected on your site, simply disable. New in v1.2.
Always StickyAlways stick the menu to the top of the page without scrolling. Important Notes If you use this option, you will likely want to manually add some padding/margin to your site container, and a max-width on the #megaMenu div if you are not expanding the menu full width. Keep in mind that features like the special classes will no longer work as intended since this feature disables the javascript component of the extension. Centering will be controlled through the core UberMenu options, not the Sticky-specific options. Not recommended for use when Stick on Mobile Devices is enabled.
Enable ClearfixIf your menu immediately gets stuck to the top of your viewport even before you scroll, the most likely issue is that your theme’s header needs to be properly cleared, as the elements may be absolutely positioned. Enable this option to clear the menu and keep it in place until you scroll.
Scroll ContextFor 99% of themes you will leave this blank, however, if your scroll pane is an HTML element rather than the window, set its selector here – for example “#content”
Disable CSSEnable this option to prevent UberMenu Sticky from inserting CSS in your site head. If you do this, you’ll need to include this CSS elsewhere in order for UberMenu Sticky to function
Apply Sticky ToIf you only want the menu to be sticky on a specific page, enter the post ID here