Sticky Transparent Header with Elementor FREE (Step-by-Step Tutorial)

Easy step-by-step guide on how you can create a Sticky Transparent Header with Elementor Free in WordPress. To make this transparent sticky header, we won't be using any additional plugins. Only the free version of Elementor and few simple lines of code that you can copy and paste as I show you in the video.

1. Copy the code (link below) and add it in an HTML widget

------------------------------------------------------------------------------

2. Add this CSS Class to the Header Section:

clearHeader

------------------------------------------------------------------------------

3. That's it! Here are the colors I used in the video

HEX Color:
- Normal/Solid Color: #0047CE
- Transparent (Opacity 80%): #0047CECC

Transparent RGB Color:
- Normal/Solid Color: rgb(0, 71, 206)
- Transparent (Opacity 80%): rgba(0, 71, 206, 0.8)

*** Elementor Free Header Template ***

[igorradulovic]

Simple, moderately geekish, effective, PERFECT! Thanks a lot, dude!

[Mekdes-wuic]

I spent 2 days working on this but after I watched this video I did it with 6 minutes.

[michaelco]

3:40 Just the solution that I was looking for, thanks!

[jubayeramd]

I have watch many videos about transparent BG. But none of these were work. Thanks for the video. Z index works for me.

[Z-e-a-l]

yooo so underrated... thanks a lot my guy! u saved my day :D

[shreyab]

Really worked for me in Elementor header !!!Thank you 😁

[thegolfingtrucker]

Worked for me - 9/25/2023 ... Thx! ... I'll sub & buy you a coffee.

[shakilkhan-ympk]

Thanks you sir!
It's very helpful for me.

[tukisam]

it worked!!!... you are a genius! tahnk

[E_ortan]

Your an animal! thank you for so much information. Brother - great teaching

[Techboy_etlf]

If we need to add a sub menu in services that is not possible 😅

[filipmoura]

How to make this element appear on all pages?

[redwaneb]

please brother I want the background image in video please that has a person like motion graphic
please i want it

[nikkaniazi]

Sir your videos are informative why you leave channel..mean just upload 3 videos..?

[couroseck]

hi somehow my header disappeared, how can I find it again?

[David-dkjk]

I tried using the code but i have some issues, i dont know if the issues are because i am using flexbox container or for other reason, what happens is that when i paste the code, in the editor preview seems to be working but when i publish it, it doesnt work in a private browser tab, also, i have a back to top button that i have setup with transparency 0-80% so it dissapears when its on the top and it only shows up when you are scrolling down, now the button will fully load since the very beginning and i dont know why the code is affecting the button.

[indioarmani]

how to change those icon list menu to hamburger menu in mobile? this is cool tutorial.

[razorhead]

its different now with the last version of elementor pro 3.21.1

[learnshalax]

this header will show on this particular page. it will not work on all the pages. and how to add sub menu?

[vaddijashwanthreddy]

I did it transparent, but i am not able to click on the links, if i change the position of the icon list below the container using transform, then it's redirecting to other page..
May i know the reason.?