Do you want to create a transparent sticky header in Elementor? A transparent sticky header sticks at the top but the content is partially visible through the transparent background as you scroll down the page, creating a sleek, modern look for a website.
What It Does
The Transparent Sticky Header effect keeps your Navigation Menu widget’s header fixed at the top of the viewport while giving its sticky-state background partial transparency, so the page content stays visible through it as visitors scroll.
Why It Matters
A solid-colored sticky header can feel heavy on image-led or full-bleed pages. A transparent sticky header keeps navigation accessible at all times without fully blocking the design underneath it, which reads as more modern and lets hero imagery or background sections stay part of the experience even after the header sticks.
What You Get
- A Navigation Menu widget with independent styling for its normal state and its sticky state.
- A dedicated Sticky background tab (Style > Sticky Main Menu) that accepts a color with adjustable transparency, separate from the header’s normal background.
- Optional backdrop-filter blur/grayscale controls on the sticky background for a frosted-glass look on top of the transparency.
Benefits
- Keeps navigation permanently reachable without visually competing with page content.
- Gives a lighter, modern feel compared to a solid sticky bar.
- Works alongside the widget’s other sticky controls (height, padding, width) without extra setup.
Capabilities
Verified against the current Navigation Menu widget source, the relevant controls are:
- Sticky Menu (control ID
enable_sticky_menu, under Extra Options): must be enabled first, off by default. - Style > Sticky Main Menu > Sticky tab (control group
smain_bg_s): a Background group control (classic or gradient) applied only while the header is in its sticky, scrolled state; this is where the transparency is set, independently of the header’s normal-state background. - Backdrop Filter popover on that same Sticky tab: optional Blur and Grayscale sliders for a frosted-glass effect over the transparent background.
- Normal Color (menu text color, under the Normal tab elsewhere in Style): controls link color independently of the sticky background, and needs to be set for contrast against whatever shows through the transparency.
How It Works
Once Sticky Menu is enabled, the widget applies a separate CSS class to the header only while it is pinned to the top of the viewport. The Style > Sticky Main Menu > Sticky tab background is scoped to that same pinned state, so setting a semi-transparent color there changes only how the header looks once it has stuck, leaving its normal, non-sticky appearance untouched.
How to Use It
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.
Learn via Video Tutorial
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 below.
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 or you can use Elementor Pro if you are already using it.
- From the Layout tab, select Horizontal Menu from the Menu Direction dropdown after selecting the appropriate Menu Type. Then add the appropriate menu.
- After that, enable the Sticky Menu toggle from the Extra Options tab.
- Then go to Style > Sticky Main Menu tab.
- Scroll down to the Section Background Options section and go to the Sticky tab.
- From the Background Type section, add a color. Make sure to add some transparency to the color based on how transparent you want the header to be.
- For better contrast, you can change the menu font color from the Normal Color section under the Normal tab.
Now when you scroll down, you’ll see a transparent background for the sticky header, and the page content will be partially visible through the header.
Use Cases
- Portfolio and agency sites with full-bleed hero imagery, where a solid header would break the visual.
- Landing pages that want persistent navigation without a heavy, opaque bar dominating the top of the screen.
- Dark or photography-driven designs where a frosted, semi-transparent header reads as more premium than a flat color block.
Limitations
- The transparent color is set only on the Sticky tab; the header’s normal, non-sticky background is a separate setting and must be configured on its own if you want a different look before it sticks.
- Menu text and icon color are controlled separately from the sticky background; a transparent background alone will not guarantee readable contrast, the Normal Color (and any sticky-specific text color option) needs to be set deliberately.
- Enabling other sticky-affecting options (for example, a logo swap on scroll) at the same time can interact with the background settings and needs its own contrast/visibility check.
- This is a PRO-only capability of the Navigation Menu widget and requires The Plus Addons for Elementor PRO to be active.
Troubleshooting
Menu text color does not change after the header becomes transparent/sticky, only the background does. The background transparency (Style > Sticky Main Menu > Sticky tab) and the menu text color (Normal Color, under the Normal tab) are two independent settings. Set the Normal Color explicitly to the contrast you want; it will not inherit from the sticky background transparency.
The wrong background color appears once the header goes sticky, even though the sticky behavior itself works fine. Double-check the color was set on the Sticky tab under Style > Sticky Main Menu, not on the Normal tab; the two backgrounds are separate, and a color saved on the wrong tab will only ever show in the non-sticky state.
Turning on a sticky background color disables a logo-swap-on-scroll effect configured on the same header. Both effects write styles to the same sticky-state header container, so review the logo-swap widget’s own sticky/scroll condition after adding a sticky background color and re-apply it if it was cleared, then verify both together in a live preview rather than checking each in isolation.
Read Further: How to Create a Blurred Glass Sticky Header in Elementor?
