---
title: "How to Create a Transparent Sticky Header Effect in Elementor?"
url: https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/
date: 2024-04-12
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "Do you want a sticky header that lets the page show through? A transparent sticky header stays at the top while the content scrolls faintly visible behind it, which suits..."
image: https://theplusaddons.com/wp-content/uploads/2024/04/How-to-Create-a-Blurred-Glass-Sticky-Header-in-Elementor_-1024x536.jpg
word_count: 477
---

# How to Create a Transparent Sticky Header Effect in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget creates a transparent sticky header by turning on Sticky Menu in Content > Extra Options and setting a see-through colour in Style > Sticky Main Menu > Section Background Options.
- The Plus Addons for Elementor Pro includes the sticky option, while the free Navigation Menu Lite widget does not have this option.
- The header stays readable by setting menu text colours in the Normal, Hover and Active tabs, and the post notes that busy content may need a blur for a frosted look.

Do you want a sticky header that lets the page show through? A transparent sticky header stays at the top while the content scrolls faintly visible behind it, which suits image-led designs.

With the Navigation Menu widget from The Plus Addons for Elementor, you get this by giving the sticky header a see-through colour.

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

## Learn via Video Tutorial

https://www.youtube.com/watch?v=yBDtAGAVfHk

## 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 and pick a colour.- In the colour picker, lower the opacity — for example to 50–70%. The lower it is, the more of the page shows through.

![Background Type on the Sticky tab of Section Background Options](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-sticky-background.webp)

> *Remove any background from the header container’s own Style tab. It would cover the transparent colour. Set the header’s normal colour on the **Normal** tab here instead.*

## Step 3: Keep the text readable

In the same section, the **Normal**, **Hover** and **Active** tabs set the menu text colours while the header is stuck. Pick colours that read well over your content.

Publish and scroll: the page now shows through the sticky header.

![A see-through sticky header with the page text showing behind it](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-transparent.webp)

## Limitations

- **Pro only.** Navigation Menu Lite has no sticky options.- **Busy content can make text hard to read.** Add a blur for a frosted look: see [the blurred glass header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/).- **The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.**

## Troubleshooting

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

### The colour shows before the header sticks

You set it on the **Normal** tab. Move it to the **Sticky** tab.

## Related Docs

- [Create a blurred glass sticky header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/)- [Change the sticky header colour on scroll](https://theplusaddons.com/docs/sticky-header-color-on-scroll/)- [Create a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before creating a transparent sticky header in Elementor?**
A: The setup depends on the Navigation Menu widget from The Plus Addons for Elementor, and it is a Pro-only feature. The widget has to be enabled under The Plus Addons > Widgets, and the header needs to be built as a header template so the menu appears across the site. If you use the Default menu type, a WordPress menu under Appearance > Menus is also part of the setup.

**Q: How do I make a sticky header transparent instead of solid?**
A: The key is giving the sticky header a see-through colour in Style > Sticky Main Menu > Section Background Options. In the Sticky tab, set Background Type to Classic and lower the opacity, with 50 to 70% called out as a practical range. That lets the page content show through while the header stays fixed at the top, which works well for image-led layouts.

**Q: How do I keep menu text readable on a transparent sticky header?**
A: Readable text comes from setting the menu colours separately for the stuck state. In Style > Sticky Main Menu, use the Normal, Hover, and Active tabs to choose colours that still stand out over whatever is behind the header. That matters more on busy pages, because transparency can make light text disappear into the background if you leave the defaults unchanged.

**Q: Why does my sticky header stay solid instead of transparent?**
A: A background on the header container can override the widget’s sticky colour. If container > Style > Background has its own background set, it wins over the Sticky tab settings. Remove that container background, then set the normal colour in Style > Sticky Main Menu > Section Background Options > Normal so the transparent sticky colour can actually show through.

**Q: Why does my transparent colour appear before the header sticks?**
A: That usually means the colour was placed on the Normal tab instead of the Sticky tab. The Normal tab controls how the menu looks before scrolling triggers stickiness, while the Sticky tab controls the stuck state. Moving the colour to Sticky keeps the transparent effect tied to scroll behavior instead of showing it too early.

**Q: What are the main limitations of a transparent sticky header in The Plus Addons for Elementor?**
A: The biggest limits are that it is Pro only, Navigation Menu Lite has no sticky options, and busy content can make text hard to read through a transparent bar. The page also notes that Elementor’s editor does not scroll like a real visitor view, so sticky effects should be checked on the published page. For a softer look on dense backgrounds, there is also [the blurred glass header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/).