Do you want the header out of the way while visitors read, but back the moment they need it? With this effect the header slides away as visitors scroll down and slides back as soon as they scroll up.
With the Navigation Menu widget from The Plus Addons for Elementor, it takes two switches.
To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free Navigation Menu Lite widget does not have this option.
- Widget to enable: Navigation Menu, switched on under The Plus Addons > Widgets.
- A header template. Add the widget to your site’s header so the menu shows on every page. Build the header with the free Nexter Builder or with Elementor Pro’s Theme Builder.
- A WordPress menu under Appearance > Menus, if you use the Default menu type.
Learn via Video Tutorial
Steps
- Build your header with the Navigation Menu widget in the same container as your logo and buttons.
- In Content > Extra Options, switch on Sticky Menu.
- Switch on On Mouse Scroll Up Sticky, which appears below it.
- Give the header a background — in Style > Sticky Main Menu > Section Background Options, or on the container. Without one, the page shows through as the header slides.
Publish and scroll: the header hides while you scroll down and comes back when you scroll up.
How It Behaves
- A small scroll of a few pixels is ignored, so the header doesn’t flicker on tiny movements.
- Sticky Menu fixes the container (or outer section) that holds the Navigation Menu widget, not just the widget. Everything in that container sticks with it, so keep your logo and buttons in the same container.
Limitations
- Pro only. Navigation Menu Lite has no sticky options.
- It needs Sticky Menu. On Mouse Scroll Up Sticky only appears when Sticky Menu is on.
- The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.
Troubleshooting
The header jumps or stops halfway
Custom CSS or another plugin is also moving the header (position, transform or its own sticky setting). Remove it, and turn off Elementor’s own Sticky/Motion Effects on the same container.
Other elements scroll over the header
Raise the header container’s Z-Index in its Advanced tab.
