UberMenu Sticky Extension Knowledgebase
Welcome to UberMenu Sticky Extension! Thank you for purchasing this plugin, I appreciate it!
This guide should answer all your questions about how to use this plugin. You can browse the document using the navigation sidebar on the left, or search the entire document by using the search bar above.
Getting Started & Getting Support
Welcome to UberMenu Sticky Extension! Thank you for purchasing this plugin, I appreciate it!
This guide should answer all your questions about how to use this plugin. You can browse the document using the navigation sidebar on the left, or search the entire document by using the search bar above.
Requirements
- WordPress 3.9+
- UberMenu 3.0+
Installation
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 yourwp-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)
Sticky Settings
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 Settings – use with caution
Setting | Purpose |
---|---|
Stick on Mobile Devices | Warning: 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 Sticky | Always 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 To | If 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.
Setting | Purpose |
---|---|
Top Spacing / 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. |
Expand Menu Bar Full Width on Scroll | By 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 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. |
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. |
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. |
Move WP Admin Bar to Footer | The 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
Setting | Purpose |
---|---|
Stick on Mobile Devices | Warning: 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 Sticky | Always 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 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. |
Scroll Context | For 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 CSS | Enable 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 To | If you only want the menu to be sticky on a specific page, enter the post ID here |
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.
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.
Sticky FAQs
The menu doesn’t stick on scroll (It’s not working!!)
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 your UberMenu compatible.
Sticky Mobile Menu Issues
A “sticky” element is an element that remains in the same position relative to the viewport, no matter how the page is scrolled. In CSS, this positioning is referred to as fixed
By nature, fixed elements have a specific property which can cause trouble: any element which is in a fixed position won’t move when scrolled. Therefore, any content in that element which does not fit within the viewport, cannot be scrolled to, and therefore will not be accessible.
Here’s a demo of this concept: Fixed position element demo. Click the link and resize your browser smaller than the element. The orange rectangle is fixed, so if you try to scroll, nothing will happen.
Compare it to this demo, with a relatively positioned green rectangle: relative position element demo. You can resize your browser smaller than the rectangle, but still scroll to its extents.
The same concept occurs when it comes to sticky menus. If you have a sticky menu, or a sticky header, the menu inside that sticky (fixed element) will also be fixed within the viewport. By nature, that means that any content that doesn’t fit on the screen will be cut off. Here is a demonstration of relative vs absolute vs fixed (sticky) positioning. Try scrolling each device to see the differences.
You will see that with an absolute or relative menu, you can scroll the viewport to view the extents of the menu. But with a fixed menu, the items that do not fit inside the viewport cannot be scrolled, and can never be accessed.
See the Pen yyRBdb by Chris Mavricos (@sevenspark) on CodePen.
If the menu content on your site is cut off, or cant be scrolled, it is possible that you have a fixed header or sticky menu that is setting the menu in a fixed position, and preventing the rest of the menu from being accessed.
An alternative
Because UberMenu appears within your site content, it won’t work well as a sticky menu on mobile (of course the same issue applied on desktop, but the issue rarely occurs there since the browser window is tall enough to accommodate the submenu, while on mobile the menu stacks and becomes much taller and is easily cut off).
If you must have a sticky menu on mobile, what you can do is use an off-canvas menu, which can work because it creates its own container outside the flow of your content, allowing overflow scrolling within that container. One option if you’d like to use an off-canvas menu is ShiftNav. Please note that UberMenu items and settings only work within UberMenu, not other menus like ShiftNav.
How to use both the Sticky and the Admin Bar at the top of the page
These instructions only apply to versions prior to v3.0
If you would rather not move your WordPress admin bar to the footer, you can move the sticky menu down just for when the admin bar appears. This will work best if you have your offset set to 0.
Just add this Custom CSS
.admin-bar #megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky{ margin-top:28px !important; }
My menu floats right normally, but when it turns sticky, it floats left – why?
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.
Visual Composer Javascript Error
These instructions only apply to versions prior to v3.0
The Conflict
If you are using the Visual Composer plugin with certain elements like the Progress Bar or Pie Charts, you’ll get a javascript error because “the sticky method does not exist in jQuery Waypoints”. This is because Visual Composer loads the Waypoints library via the wp_footer hook, which overrides UberMenu Sticky’s Waypoints; and since Visual Composer’s version of Waypoints doesn’t contain the sticky function, an error occurs.
Solution
The simplest way to resolve this is to re-enqueue the Sticky script so that it is loaded after Visual Composer’s.
Add this PHP to your theme’s functions.php
to resolve the issue:
add_action( 'wp_footer' , 'um_override_waypoints' ); function um_override_waypoints(){ wp_dequeue_script( 'sticky-js' ); wp_enqueue_script( 'sticky-js' ); }
Anchor Hash Tag Link Spacing
When you use a fixed menu like the Sticky Menu, the top 40-60 pixels of your site are always covered by the menu. That means when you scroll to hash tag linked items (e.g. Section 1
), the element you are scrolling to may get hidden under the menu.
To fix this, there’s an interesting trick you can use. Add the hashlink
class to the element with the ID to make sure it is spaced below the menu when it is scrolled to.
.hashlink:before{ display:block; position:relative; margin-top: -80px; height:80px; content: " "; visibility:hidden; }
Of course, you can also change the selector/class to whatever you like.
Change the spacing value (80) to any value you prefer, but make sure the margin and height always net to 0.
Here’s a more in-depth article on the subject: Hash Tag Links That Don’t Headbutt The Browser Window
Developers
Filters
ubermenu_sticky_apply
The ubermenu_sticky_apply
filter allows you to enable or disable sticky functionality based on your custom conditions.
Set $apply_sticky
to false to disable the sticky functionality or true to enable it.
Here’s some example code with two examples.
function um_alter_sticky( $apply_sticky , $config_id ){ //Just target the main configuration if( $config_id == 'main' ){ //Example 1: Disable UberMenu Sticky on Page ID 326 if( is_page( 326 ) ){ $apply_sticky = false; } //Example 2: Enable UberMenu Sticky on front page only if( is_front_page() ){ $apply_sticky = true; } else{ $apply_sticky = false; } } //Always return $apply return $apply_sticky; } add_filter( 'ubermenu_sticky_apply' , 'um_alter_sticky' , 10 , 2 );
UberMenu Sticky Filters
Resources for Developers
Sticky Credits
Version 3
Older Versions
jQuery WayPoints plugin by imakewebthings