Are you looking to create a blurred glass sticky header in Elementor? This type of header combines the sleekness of a glass effect with the functionality of a sticky header, creating a modern and eye-catching design.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- This is a Premium widget, and you need the PRO version of The Plus Addons for Elementor.
- Make sure the Navigation Menu widget is activated, to verify this visit Plus Settings → and search for Navigation Menu and activate.
What It Does
The Navigation Menu widget’s Sticky Menu toggle, combined with a semi-transparent Sticky background color and the Backdrop Filter blur control, turns your sticky header into a frosted-glass panel that blurs whatever scrolls underneath it instead of showing a flat color.
Why It Matters
A plain sticky header either stays fully transparent, which can make menu text hard to read over busy content, or uses a solid color, which can feel heavy on image-led designs. A blurred glass header keeps the header legible on scroll while still showing a soft impression of the content behind it, which reads as more modern than either extreme.
What You Get
A sticky header built entirely from the Navigation Menu widget’s own Sticky Menu and Sticky Main Menu style controls, no separate glassmorphism widget or custom CSS required to get the blur effect working.
Benefits
- Built from controls already in the Navigation Menu widget, no extra plugin or custom code
- Transparency and blur amount are both adjustable, so you control how strong the glass effect looks
- Works alongside any other Sticky Menu style setting (color, shadow, border) in the same Style tab
Capabilities
- Sticky Menu toggle in the Extra Options tab turns sticky behavior on for the whole widget
- Style > Sticky Main Menu tab holds all styling that applies only while the header is in its sticky/scrolled state
- Section Background Options > Sticky tab lets you set a Background Type color independently of the non-sticky state
- Color transparency (alpha) on that background color controls how much of the page shows through
- Backdrop Filter popup with a Blur field adds the actual frosted-glass blur to whatever is behind the header
How It Works
Sticky Menu switches the header’s CSS position to stay fixed once the page scrolls past it. The Sticky Main Menu style tab then lets you style that fixed state separately from the header’s normal, top-of-page appearance. Setting a background color with reduced opacity lets page content show through faintly, and the Backdrop Filter’s Blur value applies a CSS backdrop blur to that same area, which is what produces the frosted-glass look rather than a simple see-through header.
How to Use It
To do this, add the Navigation Menu widget to the header template and set up the layout as per your requirement then follow the steps:
For instance, we have created a header with the Site Logo, Navigation Menu and Header Meta Content widgets of The Plus Addons for Elementor.
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. From the Layout tab, select Horizontal Menu from the Menu Direction dropdown after selecting the appropriate Menu Type. Then add the appropriate menu.
2. After that enable the Sticky Menu toggle from the Extra Options tab.
3. Then go to Style > Sticky Main Menu tab.
4. Scroll down to the Section Background Options section and go to the Sticky tab.
5. From the Background Type section add a color. Make sure to add some transparency in the color based on how much transparent header you want.
6. Then open the Backdrop Filter popup and add some blur from the Blur field.
Now when you scroll down you will see a transparent background with blurred glass effect in the sticky header.
Use Cases
- Agencies and creative studios building modern Elementor headers who want a professional frosted glass effect on scroll without writing custom CSS
- Portfolio and photography sites where a semi-transparent sticky header preserves the visual flow of full-screen hero images as visitors scroll
- Corporate and SaaS sites that need a subtle blurred background on the sticky header to keep navigation accessible without covering page content
Limitations
- Sticky Menu, the Sticky Main Menu style tab, and Backdrop Filter are all Pro-only; the free version does not expose these controls
- The blur is a CSS backdrop-filter effect; extremely old browser versions with no backdrop-filter support render the background color without the blur
- Background Type and Backdrop Filter apply to the whole sticky header background, there is no per-menu-item blur or transparency control
- The effect depends on real content actually scrolling behind the header; on a page with a plain solid-color background the blur will be visually unnoticeable even though it is active
Troubleshooting
- No blur is visible after adding transparency. Transparency alone only makes the background see-through; the actual blur comes from the separate Backdrop Filter popup’s Blur field, confirm it has a value greater than 0.
- The Style > Sticky Main Menu tab does not seem to change anything. Confirm the Sticky Menu toggle in the Extra Options tab is enabled first; the Sticky Main Menu style tab only affects the header once it is actually sticky, so preview by scrolling the page, not by looking at the header in its default top position.
- Header looks solid instead of glassy on the live site. Check the Background Type color’s opacity value in the Sticky tab is reduced from 100 percent; a fully opaque color will hide the blur effect entirely, even with a Backdrop Filter value set.
To also add a login button to your sticky header, see How to Add a Login Button to a Sticky Header in Elementor using the Navigation Menu widget in The Plus Addons for Elementor.
Read More: How to Hide Header on Scroll Down Effect in Elementor?
To set up the Header Meta Content widget alongside your navigation menu, see Header Meta Content Widget Settings Overview in The Plus Addons for Elementor.
