[FREE] How to Create Transparent Sticky Header in WordPress with Elementor

In this tutorial I'll show you how to Create Transparent Sticky Header in WordPress with Elementor.

✅Get code snippet for making Sticky Header:
https://makedreamwebsite.com/how-to-c...

✅Get Elementor Pro:
https://makedreamwebsite.com/elemento...

✅Get ElementsKit Lite:
https://wordpress.org/plugins/element...

✅Get ElementsKit Pro:
https://makedreamwebsite.com/elements...

✅Get creative templates on my Template Shop:
https://templatish.com


Today, I’ll show you how you can make sticky transparent header in Elementor for Free. So, normally, you can create this type of sticky transparent header in Elementor Pro. But, I’ll show you how you can do that on the free version of Elementor with a little hacks.

Here, first you need to install the Elementor and the ElementsKit Lite plugin on your website. Then, you can create custom header with Elementor Editor. We create a header with logo, menu, button and social icons. Then, we'll make the header transparent header by using negative margin.

After that, to make the header sticky, we use some custom CSS and JavaScript code which you can get from my link above. We use CSS class for our 2 different logos - one for transparent header, another for sticky header.

We can also customize the background color and text color of our sticky header from our code. I've shown you how to change that.

After that, we make our header responsive for mobile and tablet devices. Here, we create 2 different menus - one for desktop and another for tablets and mobiles.

So, that’s how you can create a transparent sticky header on your WordPress website.