---
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-05-11
lang: en
author: "Aditya Sharma"
description: "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,..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Create-a-Blurred-Glass-Sticky-Header-in-Elementor_-1-1024x536.jpg
word_count: 438
---

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

## 

- Requires Elementor FREE Plugin and The Plus Addons for Elementor PRO version for creating a blurred glass sticky header.
- Activates the Sticky Menu toggle in the Extra Options tab to enable the sticky header functionality.
- Utilizes the Backdrop Filter to add blur and transparency to the sticky header background.

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](http://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Navigation Menu widget is activated, to verify this visit Plus Settings → and Search for Navigation Menu and activate.

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

**Best Used For:**

- 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

### Learn via Video Tutorial:

https://www.youtube.com/watch?v=1VsbB8D3ncA

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

To also add a login button to your sticky header, see [How to Add a Login Button to a Sticky Header in Elementor](https://theplusaddons.com/docs/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?](https://theplusaddons.com/docs/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](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/) in The Plus Addons for Elementor.