---
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-04-09
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: 311
---

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

## Key Takeaways

- The Plus Addons for Elementor requires the PRO version to access the blurred glass sticky header feature.
- Elementor FREE Plugin must be installed and activated to create a blurred glass sticky header.
- The Navigation Menu widget must be activated in Plus Settings to implement the sticky header design.

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)

### 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’ve 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’ll see a transparent background with blurred glass effect in the sticky header.

***Read More***: *[How to Hide Header on Scroll Down Effect in Elementor?](https://theplusaddons.com/docs//hide-header-on-scroll-down-effect-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if the blurred glass effect isn't showing up on my sticky header?**
A: If the blurred glass effect isn't appearing, check that you've enabled the Sticky Menu toggle in the Extra Options tab. Additionally, ensure you've set a transparent background color in the Section Background Options and adjusted the blur level in the Backdrop Filter popup. If these settings are correct and the effect still doesn't show, verify that you are using the PRO version of The Plus Addons for Elementor, as this feature requires it.

**Q: Can I create a blurred glass sticky header using the free version of Elementor?**
A: Creating a blurred glass sticky header requires the PRO version of The Plus Addons for Elementor. The free version of Elementor does not support the premium widgets necessary for this effect. If you're looking to achieve this design, consider upgrading to the PRO version to access the required features and widgets.

**Q: What is the best way to set the transparency for the background color of the sticky header?**
A: To achieve the desired transparency for your sticky header's background, adjust the transparency level in the Background Type section under the Sticky tab. A good practice is to start with a lower transparency value and gradually increase it until you reach the desired level of visibility. This allows the blurred effect to shine through while still providing a distinct background.

**Q: Does the blurred glass sticky header work on mobile devices?**
A: The blurred glass sticky header created with The Plus Addons for Elementor is designed to be responsive, meaning it should work on mobile devices. However, always test your design on various screen sizes to ensure that the sticky effect and visual clarity remain intact across devices.

**Q: Can I use other page builders with The Plus Addons for Elementor?**
A: The Plus Addons for Elementor is specifically designed to work only with Elementor. It does not support other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can take full advantage of the features offered by The Plus Addons for Elementor for your designs.