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

Рет қаралды 37,058

2 жыл бұрын

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

Пікірлер: 55

@igorradulovic4019 11 ай бұрын

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

@shreyab998 6 ай бұрын

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

@Z-e-a-l Жыл бұрын

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

@user-xs5oq3gx4e Жыл бұрын

straight to the point. thanks!!

@Mekdes-wu2ic Ай бұрын

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

@shakilkhan-ym1pk 8 ай бұрын

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

@HassaanNaeem-df7lx 6 ай бұрын

Worked!! Great Tutorial

@michaelco1000 2 ай бұрын

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

@tukisam9092 11 ай бұрын

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

@benitobeya7586 2 ай бұрын

Perfecto 👌👌👌 I've suscribed !

@E_ortan 8 ай бұрын

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

@Ejazahmed-h2t 11 күн бұрын

simple and very helpfull

@isuruwan23 6 ай бұрын

Perfect ,Thank you

@thegolfingtrucker850 10 ай бұрын

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

@redwan_lmati 3 ай бұрын

Thanks a lot brother!

@alessandrascrig.2169 9 ай бұрын

Thank you very much.

@jubayeramd Жыл бұрын

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

@chathurajayadinu 11 ай бұрын

Thank you ❤

@MURATAKPINAR7 11 ай бұрын

Brilliant. 💛 😊

@m0hamedology 9 ай бұрын

thank you so muchhhhhhh

@Kids_Hub_house 2 ай бұрын

great job

@joanaalmeidaJA 4 ай бұрын

Thank you

@rajkamal2306 4 ай бұрын

very thanks sir

@jordiargomaniz7 6 ай бұрын

Thanks

@nikkaniazi4220 Ай бұрын

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

@user-zg8yh3jz1t 11 ай бұрын

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

@shanondesilva 4 ай бұрын

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

@David-dk2jk 9 күн бұрын

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.

@vaddijashwanthreddy8908 7 ай бұрын

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

@brandstrategydesign6564 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

@@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 8 ай бұрын

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

@Techboy_et4lf 27 күн бұрын

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

@learnshala10x 3 ай бұрын

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

@couroseck3604 21 күн бұрын

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

@indioarmani8209 2 жыл бұрын

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

@createonweb 2 жыл бұрын

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 2 жыл бұрын

@@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 2 жыл бұрын

@@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 2 жыл бұрын

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