Sticky Menu

Using Max Mega Menu Pro it is possible to make your menus stick to the top of the page as the user scrolls down.

Making a menu sticky / fixed

To make a menu stick to the top of the page when the user scrolls down, go to Appearance > Menus.

Select the menu you’d like to become sticky and enable the “Sticky” option.

Stick on mobile

This setting will enable or disable the menu from being ‘stuck’ on mobiles.

If you have a menu with a large sub menu it is possible the menu could fill the screen. In this instance the user could become ‘trapped’ on the menu without being able to scroll past it. For this reason the sticky behaviour is automatically disabled on mobile devices.

If you enable the “Sticky on mobile” option then you must sure that at no point the menu can become taller than the screen size. To do this you can use the ‘Hide on mobile’ or ‘Hide sub menu on mobile’ option for each menu item (within the mega menu settings) to reduce the height of your menu.

Experimental workaround for tall sticky menus on mobile:

Go to Mega Menu > Menu Themes and paste the following into the Custom Styling area:

This will set the maximum height of the sticky menu to 300px, and allow the user to scroll up and down the menu items within the menu area. The menu toggle button will always be visible, allowing the user to close the menu and continue scrolling through the page content.

Sticky Opacity

Set the opacity (transparency) of the menu when it’s sticky. 1 is full opaque, 0 is fully transparent.

Sticky Offset

If you enable multiple sticky menus, or have other sticky elements on your site, you can use this option to make sure they do not stack on top of each other.

Expand Background

By default the menu background will expand to fill the whole width of the browser when the menu becomes sticky. If you are, for example, making an accordion menu sticky (where the content to the left or right of the menu needs to remain visible), you can set this to ‘Off’.

Like what you see? This functionality is available in Max Mega Menu Pro

Related Articles