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

Filters

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