Sticky Mobile Menu Issues

Knowledgebase Docs » UberMenu 3

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 do, 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.