Create sticky transparent header on Elementor for free

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.

Create the header:

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.