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 Mega Menu > Menu Locations.
Click the menu location that you want to stick to open its settings, then open the Sticky tab.
Sticky Menu Settings
Enabled
Turn this on to enable the sticky functionality for this menu location.
Stick on (desktop/mobile)
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).
Important: only enable this if your menu is not already inside a sticky container (for example a sticky theme header).
Sticky Opacity
Set the opacity (transparency) of the menu when it’s sticky, between 0.2 and 1.0. 1 is fully opaque.
Sticky Offset
Set the distance between the top of the window and the top of the menu when the menu is stuck. 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 turn this off. It can be set separately for desktop and mobile, and only works with horizontal menus.
Hide Until Scroll Up
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.
Scroll Tolerance
Adjusts how sensitive the Hide Until Scroll Up behaviour is (recommended: 50). Only applies when “Hide Until Scroll Up” is enabled. This is the Tolerance field next to Hide Until Scroll Up.
Scroll Offset
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. This is the Offset field next to Hide Until Scroll Up.
Shrinking the menu when it becomes sticky
You can make the menu bar shorter once it sticks to the top of the page, which leaves more room for your content as the user scrolls. Go to Mega Menu > Menu Themes, select your menu theme and open the Menu Bar tab of the Theme Editor. Under Menu Height (Sticky):
- Tick Enabled
- Enter the Height of the menu when it is sticky. This should be smaller than the normal Menu Height setting above it
- Tick Transition to animate the change in height, instead of switching instantly
Showing or hiding items in the sticky menu
Each menu item has a Visibility in Sticky Menu option, found on the Settings tab of the menu item settings. Choose from Always show, Show only when menu is stuck or Hide when menu is stuck. For example, you could show a logo or a “Get in touch” button only once the menu becomes sticky.
See How to show or hide items in the sticky menu for step-by-step instructions.