Are you looking to create a blurred glass sticky header in Elementor? The header stays at the top and blurs the content scrolling behind it, like frosted glass.
With the Navigation Menu widget from The Plus Addons for Elementor, you need two settings: a see-through colour and a blur. No custom CSS.
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: 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, pick a colour and lower its opacity to around 50–60%.
Step 3: Add the blur
On the same tab, click the pencil next to Backdrop Filter and set Blur — 8–12px gives a clear frosted effect. Grayscale, below it, removes colour from what shows through.
Remove any background from the header container’s own Style tab — it would cover the effect. Set the header’s normal colour on the Normal tab here instead.
Publish and scroll: the content behind the header is now blurred.
Limitations
- Pro only. Navigation Menu Lite has no sticky options.
- The blur needs a see-through colour. With a fully opaque colour you can’t see the blur.
- The blur only shows over busy content. Over a plain background it looks like a normal transparent header.
- The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.
Troubleshooting
No blur
Check Blur is above 0, the colour’s opacity is below 100%, and both are on the Sticky tab.
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.
