{"id":229061,"date":"2020-01-24T14:58:13","date_gmt":"2020-01-24T14:58:13","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/sticky-menu-copy\/"},"modified":"2025-03-27T10:00:16","modified_gmt":"2025-03-27T10:00:16","slug":"sticky-menu","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/sticky-menu\/","title":{"rendered":"Sticky Menu"},"content":{"rendered":"

Using Max Mega Menu Pro it is possible to make your menus stick to the top of the page as the user scrolls down.<\/p>\n

Making a menu sticky \/ fixed<\/h3>\n

To make a menu stick to the top of the page when the user scrolls down, go to Mega Menu > Menu Locations<\/i>.<\/p>\n

Expand the menu location that you want to stick, and click the Sticky tab.<\/p>\n

\"\"<\/a><\/p>\n

Sticky Menu Settings<\/h3>\n

Enabled<\/h4>\n

This must be checked for the sticky functionality to be enabled for this menu location.<\/p>\n

Stick on (desktop\/mobile)<\/h4>\n

This setting will enable or disable the menu from being ‘stuck’ on desktop or mobile (when the screen is wider or narrower than the width of the defined “Responsive Breakpoint” in the menu theme).<\/p>\n

Sticky Opacity<\/h4>\n

Set the opacity (transparency) of the menu when it’s sticky. 1 is full opaque, 0 is fully transparent.<\/p>\n

Sticky Offset<\/h4>\n

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.<\/p>\n

Expand Background<\/h4>\n

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’.<\/p>\n

Hide Until Scroll Up<\/h4>\n

When this option is enabled the menu will scroll off the screen as the user scrolls down the page. However, as soon as the user starts scrolling up, the menu will reappear. Check the header menu on this page to see an example of this behaviour.<\/p>\n

Scroll Tolerance<\/h4>\n

Adjusts how sensitive the Hide Until Scroll Up behaviour is (recommended: 50). Only applies when “Hide Until Scroll Up” is enabled.<\/em><\/p>\n

Scroll Offset<\/h4>\n

The menu will disappear from the screen once the user has scrolled this far down the page. Only applies when “Hide Until Scroll Up” is enabled.<\/em><\/p>\n

See Also<\/h2>\n