Do you want a sticky header that lets the page show through? A transparent sticky header stays at the top while the content scrolls faintly visible behind it, which suits image-led designs.
With the Navigation Menu widget from The Plus Addons for Elementor, you get this by giving the sticky header a see-through colour.
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
Step 1: Turn on Sticky Menu
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.
Step 2: Set a see-through colour
- Go to Style > Sticky Main Menu > Section Background Options and open the Sticky tab.
- Set Background Type to Classic and pick a colour.
- In the colour picker, lower the opacity — for example to 50–70%. The lower it is, the more of the page shows through.
Remove any background from the header container’s own Style tab. It would cover the transparent colour. Set the header’s normal colour on the Normal tab here instead.
Step 3: Keep the text readable
In the same section, the Normal, Hover and Active tabs set the menu text colours while the header is stuck. Pick colours that read well over your content.
Publish and scroll: the page now shows through the sticky header.
Limitations
- Pro only. Navigation Menu Lite has no sticky options.
- Busy content can make text hard to read. Add a blur for a frosted look: see the blurred glass header.
- The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.
Troubleshooting
The header stays solid
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.
The colour shows before the header sticks
You set it on the Normal tab. Move it to the Sticky tab.
