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
Link: websitehour.com/sticky-transp...
------------------------------------------------------------------------------
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 **
To show your header (or footer) on every page automatically for FREE, watch this video: • How to Build a Header ...

[@igorradulovic4019]

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

[@Z-e-a-l]

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

[@shreyab998]

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

[@user-xs5oq3gx4e]

straight to the point. thanks!!

[@HassaanNaeem-df7lx]

Worked!! Great Tutorial

[@shakilkhan-ym1pk]

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

[@jubayeramd]

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

[@tukisam9092]

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

[@michaelco1000]

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

[@benitobeya7586]

Perfecto 👌👌👌 I've suscribed !

[@isuruwan23]

Perfect ,Thank you

[@user-zg8yh3jz1t]

But how i can do the header in mobile to be inside a boz and not under the logo?

[@redwan_lmati]

Thanks a lot brother!

[@E_ortan]

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

[@shanondesilva]

is there a way to add sub menus to the main menu?

[@vaddijashwanthreddy8908]

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.?

[@alessandrascrig.2169]

Thank you very much.

[@MURATAKPINAR7]

Brilliant. 💛
😊

[@chathurajayadinu]

Thank you ❤

[@thegolfingtrucker850]

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

[@m0hamedology]

thank you so muchhhhhhh

[@learnshala10x]

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

[@Kids_Hub_house]

great job

[@joanaalmeidaJA]

Thank you

[@Mekdes-wu2ic]

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

[@brandstrategydesign6564]

Hi, thank you for this tutorial! I had following issue when implementing the html code, the transparent sticky header functions impecably but on below sections of the website, some photos became transparent/invisible. Any idea how can this be fixed? Thanks a lot

[@createonweb]

Hi! The problem you have shouldn't be because of the code provided, but I guess anything is possible...
I'm curious what is happening on your website to cause that. If you want, share the URL where the photos become invisible, and I will try to help you fix it.

[@brandstrategydesign6564]

@@createonweb Hi, thank you! When I remove the html code, the issue dissapears. I'm not sure how to share the url with you without sharing it publicly though since it is still a working stage. Thanks

[@busenurkendir]

I have same the issue, how did you solve it?

[@amav8280]

Changing the jQuery version from 1.8.3 to the most recent one seems to fix this issue

[@couroseck3604]

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

[@rajkamal2306]

very thanks sir

[@razorhead2008]

its different now with the last version of elementor pro 3.21.1

[@Techboy_et4lf]

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

[@tukisam9092]

not working... please help

[@jordiargomaniz7]

Thanks

[@angeneilonia876]

not working on the front end

[@nikkaniazi4220]

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

[@menbeyondlimits]

the html code doesn't work

[@indioarmani8209]

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

[@createonweb]

Instead of using the Icon List, you can use the Nav Menu (Elementor Pro) widget or similar widget from some free plugin (like ElementsKit, it has a Nav Menu in the free version).
You will need to create a menu first (WP Dashboard -> Appearance -> Menus). The Nav Menu widgets have a mobile dropdown option, and you can set the breakpoint (when the menu becomes a hamburger icon) to tablet >1024px or mobile >767px.

[@indioarmani8209]

@@createonweb if I use wp plugin i will not find this video at the first place, i like this tutorial because this icon list solution is somehow smart. anyway i will try your advice of elementskit. thank you very appreciate your work making this video.

[@createonweb]

@@indioarmani8209 Thank you Indio! I will add this to my list of videos, so expect a video in the future about this - hamburger mobile menu, free and no extra plugins.

[@stevechong65]

You could hide the original menu for mobile, create another menu using accordion and hide it from desktop (use Hamburger) for the icon

[@user-be7qe4qt1m]

It's not showing on all my pages, only the homepage, please help!

[@pavelsiwy4884]

So copy the html code and paste it on the site´s you want.

[@feelnopaincs]

Doesn't work for me

[@cezar.i.b]

Bro start making videos again :D

[@mateuszderecki7397]

It's NAV! Not Header. Header is section with Web Designer text, button, image etc. It's important for Google robots. Nav!!

[@the_obm]

Nah bro, that's the hero section.

[@LOFI-MUNDE]

these are all fake comments broo its sooo easy