A sticky menu stays at the top of the screen while visitors scroll, so your main links, search and buttons are always one click away.
With the Navigation Menu widget from The Plus Addons for Elementor, you turn on a sticky header with one switch — no code needed.
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.
Step 1: Build the header
Put the Navigation Menu widget in your header template, in the same container as your logo and buttons. Choose the Menu Type, Menu Direction and menu.
Step 2: Turn on Sticky Menu
In Content > Extra Options, switch on Sticky Menu.
Publish and scroll the page. The header now stays at the top.
What Sticks, and When
- 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.
- With Elementor’s older sections, the outer section sticks, even if the widget is in an inner section. With containers, the closest container sticks — if the widget sits in a container inside another one, only the inner one sticks.
- The header sticks as soon as the page scrolls past the top of that container — for a header at the top of the page, that is the first scroll.
- A placeholder of the same height takes its place, so the page below does not jump.
Optional: Show It Only When Scrolling Up
Switch on On Mouse Scroll Up Sticky, just below Sticky Menu. The header then hides while visitors scroll down and slides back as soon as they scroll up. See how to hide the header on scroll down.
Style the Sticky Header
Turning on Sticky Menu adds two sections to the Style tab. Their settings only apply while the header is stuck:
| Section | Settings |
|---|---|
| Sticky Main Menu | Item padding, indicator and Normal / Hover / Active colours; Section Background Options with Normal and Sticky tabs, each with a Backdrop Filter; Sticky Padding; Sticky Width, Top, Container Alignment, Border Radius and Box Shadow |
| Sticky Mobile Menu | Mobile menu colours, and Scroll Overflow |
Guides: change the colour on scroll, transparent sticky header, blurred glass header and shrinking header.
Limitations
- Pro only. Navigation Menu Lite has no sticky options.
- The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.
Troubleshooting
Only part of the header sticks
The widget is in a container inside another container, so only the inner one sticks. Move the logo and buttons into the same container as the menu, or move the menu into the outer container.
The sticky colour never appears
If the header container has its own background (container > Style > Background), that background wins over the widget’s Sticky tab. Remove it and set the normal colour in Style > Sticky Main Menu > Section Background Options > Normal instead.
A long mobile menu can’t be scrolled
Turn on Style > Sticky Mobile Menu > Scroll Overflow. It lets the stuck header scroll on screens at or below the Open Mobile Menu width.
