[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:

✅Get Elementor Pro:

✅Get ElementsKit Lite:

✅Get ElementsKit Pro:

✅Get creative templates on my Template Shop:

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.

[silinaunger]

This is the best video I've seen for making Header with Elementor. Thanks!

[HamdhanHasmy]

This is the best video in youtube for making header with Elementor. Hats off mate!

[iplaystudio]

The best elementor mentor ever! I love your videos, I'm really slow but it works, Please always show your navigation menu, Cause I sometimes mess up and the code doesn't work. Thank you!!!

[Revefx]

Man, you really created a beautiful tutorial. I was halfway into the video and tested it how it will look on mobile and I thought - good, how will i fix this, tried few things and gave up. Then played your tutorial again and I was really happy that you even covered this part! Thank you very much.

[pruthviravindra]

Probably the best video on creating a transparent sticky header!
I was happy that you considered the mobile and tablet layouts as well for the explanation.

[jazzeyhenry]

This is by far the best tutorial video I have ever watched, I am glad to have found this channel and I subscribed immediately, you just saved my website Thanks!

[eltoski]

I love you 😂😂😂😂, thanks for this video, just saved my life 😂😂🔥🔥🔥🔥🔥💜💜, best video on elementor menu ever 🔥🔥🔥

[merhabafam]

I am very fresh on wordpress and you made may day man.

[Laura-djv]

Thank you very much for this video! I'm so glad I was able to apply this to my site as well.

[NadineOb-xc]

Great video! Your step-by-step instructions made it so easy to follow and understand. Thank you so much for taking the time to create and share this valuable content! Keep up the fantastic work.

[reefatsayyad]

You are really amazing! Nobody has made a video like you did! Clearly understandable..!

[DvorcsakSzabolcs]

Many Thanks! Wonderfull job and description. You have help me out a lot. I really appriciated Mr. Jitu Raiyan!!! GOD BLESS!!!

[mdnomanurahmad]

thanks for this video. It was very helpful for me and I hope that you will continue making videos for us

[kamusiimeraymondisaac]

Amazing stuff bro. You have saved many. Thank you so much

[JustHope-cwxf]

The video is cool and straight forward for even a newbie to use

[arunhembram]

Undoubtedly the most informative video.

[SheikhSohel]

It's an awesome video for making a header transparent and sticky. Thank you.

[kshiv]

I have only one simple word to describe your efforts...just wowwww amazing Loved that

[alexisdauli]

Thanks man, this is the best video on this topic.

[nimishamohan]

Very Helpful video....detaily described each points..Learned new things and methods...Thank you sir