Skip to content

Create sticky transparent header on Elementor for free

Reading Time: 2 minutes
Transparent sticky header

Beautiful effects, vision and style. Want to create a header that becomes transparent on scroll and sticks to the top? Or changes its color on scroll? Or just sticks to the top? Well here’s how to create sticky transparent header on Elementor for free – using only free plugins.

[If you want to create a sticky vertical menu for free]

The process:

It’s really simple and easy.

  1. Install the required plugins
  2. Create the header
  3. Sticky header
  4. Change background color on scroll

Install the required plugins:

From your WordPress dashboard, install and activate the following plugins

  1. Elementor Header & Footer Builder – Is used to create the header
  2. Sticky Menu & Sticky Header – Used to stick the header to the top of the page

You obviously need Elementor.

  1. Go to your WordPress dashboard -> Appearance -> Elementor header, footer & blocks
  2. Add a new header -> Edit with Elementor
  3. Design your menu

IMPORTANT: Make sure you make the background color the color you want it to be on scroll. So, if you want the menu to be transparent after scroll, then make the background transparent here, in the Elementor editor.

Stick the header to the top of the page

All we have to do is to add a CSS class to the header, and then add that CSS class in the sticky header’s settings.

In the header’s editor (Elementor):

  1. Right click on the header’s entire section -> edit section
  2. Go to Advanced -> CSS Class
  3. Write “header” in the CSS Class

In your WordPress dashboard:

  1. Go to settings -> Sticky header
  2. In the sticky element’s field write “.header”

You header is now sticky.

Change background color on scroll:

Only one step left to create sticky transparent header. We created the header, made it sticky, now all is left is to choose the header’s background color on scroll.

Here’s the tricky part, do you remember the important note in the header design stage? You made the background color the color you wish it to be on scroll. So now we have to change the background color when it’s not in the scroll status.

Go to WordPress dashboard -> Appearance -> Customize -> Additional CSS

Add the following code. Make sure to change the color to whatever color you want the menu to be before scrolling.

div.sticky-element-placeholder.sticky-element-active {
Background-color: white;

In my case, I want the menu to be white in the beginning but then change to transparent when scrolled. So when I was designing my header I made the background color transparent, then made the background color white in the Additional CSS, so that it is transparent before scrolling.

Leave a Reply

Subscribe, I never spam

Read More
Although I don’t have a restaurant the urge to read it was too strong and didn’t disappoint. I guess if you have a restaurant this is a must-read. Thanks a lot.
Diogo Barros
Diogo Barros
Read More
Thank you !
Read More
i've been searching everywhere for this solution, you're the first person who gave a simple solution. Ty
Farah I
Farah I
Read More
Thanks. I already have cloudflare and its still slow.. was thinking of how to remove unused js... but found your video instead
Read More
makes complete sense bro. Thank you
 Tobee Panyasith
Tobee Panyasith
Read More
Thank you for this great video

Table of Content

Subscribe to my mailing list

I never spam