---
title: "How to Create a Blurred Glass Sticky Header in Elementor?"
url: https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/
date: 2024-04-16
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Create-a-Blurred-Glass-Sticky-Header-in-Elementor_-1-1024x536.jpg
word_count: 474
---

# How to Create a Blurred Glass Sticky Header in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget creates a blurred glass sticky header with only two settings, a see-through colour and a blur, and it needs no custom CSS.
- Navigation Menu is part of The Plus Addons for Elementor Pro, while the free Navigation Menu Lite widget does not have sticky options.
- Blur works only when the Sticky tab uses Blur above 0 and colour opacity below 100%, and the header container must not keep its own background or it covers the effect.

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](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## 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](https://nexterwp.com/docs/nexter-theme-builder-explained/) 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.

![Blur in the Backdrop Filter popover on the Sticky tab](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-sticky-blur.webp)

> *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.

![A blurred glass sticky header over scrolling text](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-glass.webp)

## 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.

## Related Docs

- [Create a transparent sticky header](https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/)- [Hide the header on scroll down](https://theplusaddons.com/docs/hide-header-on-scroll-down-effect-in-elementor/)- [Add a login button to a sticky header](https://theplusaddons.com/docs/add-a-login-button-to-a-sticky-header-in-elementor/)- [Header Meta Content widget](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)

## Frequently Asked Questions

**Q: What do I need before creating a blurred glass sticky header in Elementor?**
A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor Pro, plus a header template and a WordPress menu if you use the Default menu type. The widget must be installed and activated, and the free Navigation Menu Lite widget does not include sticky options. That matters because the blur effect only works once the menu can stick and sit inside a real header that appears across the site.

**Q: Why does my sticky header need a see-through background for the blur effect to work?**
A: The blur only shows when the sticky header background is transparent enough for content behind it to remain visible. The page recommends setting a Classic background color with opacity around 50% to 60% on the Sticky tab. If the color is fully opaque, the backdrop filter has nothing visible to blur, so the header just looks solid instead of frosted.

**Q: What blur setting gives the best frosted glass effect in Elementor?**
A: A Blur value around 8 to 12px gives the clearest frosted glass look in the Sticky tab. That range is strong enough to soften scrolling content without turning the header into a muddy overlay. Grayscale sits under Backdrop Filter too, and it removes color from what shows through, which can make the effect feel more muted.

**Q: Why does my sticky header stay solid instead of looking blurred?**
A: A background on the header container usually overrides the widget’s sticky styling, so the solid container background wins and hides the blur. The fix is to remove that container background and set the normal color in Style > Sticky Main Menu > Section Background Options > Normal instead. That keeps the non-sticky state styled without blocking the sticky backdrop filter.

**Q: Does a blurred glass sticky header work with Navigation Menu Lite?**
A: Navigation Menu Lite does not support sticky options, so this effect is tied to Navigation Menu in The Plus Addons for Elementor Pro. The page also notes that The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this as part of its Pro widget set. If you need sticky behavior, Lite is not enough for this tutorial.

**Q: Is there another way to create a transparent sticky header in Elementor?**
A: A related option is [Create a transparent sticky header](https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/), which focuses on transparency rather than blur. That distinction matters because transparency alone gives you a clean overlay, while this tutorial adds Backdrop Filter blur for a frosted-glass look. For other header behaviors, there are also docs for [Hide the header on scroll down](https://theplusaddons.com/docs/hide-header-on-scroll-down-effect-in-elementor/) and [Add a login button to a sticky header](https://theplusaddons.com/docs/add-a-login-button-to-a-sticky-header-in-elementor/).