WordPress 3.9+ UberMenu 3.0+

Install the Plugin WordPress Plugin Uploader You can install UberMenu Sticky Extension via the WordPress plugin uploader without unzipping the download package. Log into your WordPress admin panel Navigate to Plugins > Add New Click Upload Click Choose File and select the UberMenu Sticky Extension download zip. Click Install Now. FTP You can also install UberMenu Sticky Extension via FTP Extract the .zip file you downloaded from CodeCanyon. Find the ubermenu-sticky folder (this directory is created when you unzip the file). Upload the ubermenu-sticky folder to your wp-content/plugins directory. Navigate to your Control Panel: Plugins Under UberMenu – Sticky Menu Extension, click Activate What did this do? Once you install the plugin, you’ll get: Any UberMenu currently on your site will automatically become sticky A new Sticky Settings panel within the UberMenu Control Panel (Appearance > UberMenu)

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. Setting Purpose Enable Sticky Menu Make this menu sticky when the user scrolls past it. Top Offset If 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 Bar When 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 Clearfix If 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 Width If 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 Background If 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 […]

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 Older Versions 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. 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.

Fixed positioning is much less flexible than relative or static positioning. Different browsers handle this differently. Your ability to float your menu right while it is sticky will be dependent on how your theme works. To accomplish this you will need to write custom CSS. UberMenu Sticky specifically allows you to left-align or center the menu when it is sticky; the recommended solution is to use one of these positions rather than try to align it right.

Uh oh! If everything else on your site is running properly, UberMenu Sticky Extension should run without issue. But if your menu isn’t sticking as you scroll, there could be a few issues: 1. Javascript errors If you have ANY javascript errors on your site, this can break the sticky functionality. That means if you’ve installed a theme or plugin that is misbehaving, this can cause trouble. The same javascript errors that will break UberMenu will break UberMenu Sticky – it’s just more obvious with UberMenu Sticky because a non-javascript sticky “fallback” is not possible. Please check out the UberMenu Troublshooter – javascript errors to troubleshoot your issue. The most common is an unrelated javascript error from another plugin/theme breaking things. 2. Transformed Ancestor Element The sticky menu works by setting the menu to fixed position, so that as you scroll the viewport, the menu remains in the same position. One quirk of fixed positioning is that if a parent or ancestor element of that fixed element has a CSS transform, the browser will treat the fixed element as position:absolute instead. This will break the sticky functionality, naturally. The solution is to find the ancestor element that is being transformed, and override that style with transform:none; 3. CSS Syntax Error Check your CSS syntax in your UberMenu Control Panel’s Custom CSS tweaks area. If you have a syntax error there, UberMenu Sticky’s CSS won’t get read and you won’t get a sticky menu. 4. CSS Override If your theme is forcing the menu’s position to be relative, absolute, static, etc – the menu won’t be able to stick ( it needs to be fixed ). 5. UberMenu Version Remember, UberMenu Sticky requires UberMenu Version 3.0 or later. If you are using an earlier version, please upgrade in order to make […]

Version 3 StickyJS by Anthony Garand Older Versions jQuery WayPoints plugin by imakewebthings