Тёмный

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

Create on Web
Подписаться 290
Просмотров 33 тыс.
50% 1

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

Опубликовано:

 

18 фев 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 51   
@igorradulovic4019
@igorradulovic4019 10 месяцев назад
Simple, moderately geekish, effective, PERFECT! Thanks a lot, dude!
@Mekdes-wu2ic
@Mekdes-wu2ic 5 дней назад
I spent 2 days working on this but after I watched this video I did it with 6 minutes.
@shreyab998
@shreyab998 5 месяцев назад
Really worked for me in Elementor header !!!Thank you 😁
@Z-e-a-l
@Z-e-a-l Год назад
yooo so underrated... thanks a lot my guy! u saved my day :D
@user-xs5oq3gx4e
@user-xs5oq3gx4e 11 месяцев назад
straight to the point. thanks!!
@shakilkhan-ym1pk
@shakilkhan-ym1pk 7 месяцев назад
Thanks you sir! It's very helpful for me.
@HassaanNaeem-df7lx
@HassaanNaeem-df7lx 5 месяцев назад
Worked!! Great Tutorial
@michaelco1000
@michaelco1000 Месяц назад
3:40 Just the solution that I was looking for, thanks!
@tukisam9092
@tukisam9092 9 месяцев назад
it worked!!!... you are a genius! tahnk you!!!!!
@benitobeya7586
@benitobeya7586 Месяц назад
Perfecto 👌👌👌 I've suscribed !
@isuruwan23
@isuruwan23 5 месяцев назад
Perfect ,Thank you
@redwan_lmati
@redwan_lmati 2 месяца назад
Thanks a lot brother!
@jubayeramd
@jubayeramd Год назад
I have watch many videos about transparent BG. But none of these were work. Thanks for the video. Z index works for me.
@MURATAKPINAR7
@MURATAKPINAR7 10 месяцев назад
Brilliant. 💛 😊
@alessandrascrig.2169
@alessandrascrig.2169 8 месяцев назад
Thank you very much.
@thegolfingtrucker850
@thegolfingtrucker850 9 месяцев назад
Worked for me - 9/25/2023 ... Thx! ... I'll sub & buy you a coffee.
@E_ortan
@E_ortan 7 месяцев назад
Your an animal! thank you for so much information. Brother - great teaching
@chathurajayadinu
@chathurajayadinu 10 месяцев назад
Thank you ❤
@RabiaKhann-lp9lo
@RabiaKhann-lp9lo Месяц назад
great job
@joanaalmeidaJA
@joanaalmeidaJA 3 месяца назад
Thank you
@m0hamedology
@m0hamedology 8 месяцев назад
thank you so muchhhhhhh
@shanondesilva
@shanondesilva 3 месяца назад
is there a way to add sub menus to the main menu?
@vaddijashwanthreddy8908
@vaddijashwanthreddy8908 6 месяцев назад
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.?
@rajkamal2306
@rajkamal2306 3 месяца назад
very thanks sir
@jordiargomaniz7
@jordiargomaniz7 5 месяцев назад
Thanks
@user-zg8yh3jz1t
@user-zg8yh3jz1t 10 месяцев назад
But how i can do the header in mobile to be inside a boz and not under the logo?
@nikkaniazi4220
@nikkaniazi4220 25 дней назад
Sir your videos are informative why you leave channel..mean just upload 3 videos..?
@learnshala10x
@learnshala10x Месяц назад
this header will show on this particular page. it will not work on all the pages. and how to add sub menu?
@razorhead2008
@razorhead2008 Месяц назад
its different now with the last version of elementor pro 3.21.1
@brandstrategydesign6564
@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
@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
@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
@busenurkendir Год назад
I have same the issue, how did you solve it?
@amav8280
@amav8280 7 месяцев назад
Changing the jQuery version from 1.8.3 to the most recent one seems to fix this issue
@tukisam9092
@tukisam9092 9 месяцев назад
not working... please help
@menbeyondlimits
@menbeyondlimits 8 месяцев назад
the html code doesn't work
@indioarmani8209
@indioarmani8209 Год назад
how to change those icon list menu to hamburger menu in mobile? this is cool tutorial.
@createonweb
@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
@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
@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
@stevechong65 Год назад
You could hide the original menu for mobile, create another menu using accordion and hide it from desktop (use Hamburger) for the icon
@angeneilonia876
@angeneilonia876 4 месяца назад
not working on the front end
@user-be7qe4qt1m
@user-be7qe4qt1m 7 месяцев назад
It's not showing on all my pages, only the homepage, please help!
@pavelsiwy4884
@pavelsiwy4884 6 месяцев назад
So copy the html code and paste it on the site´s you want.
@cezar.i.b
@cezar.i.b 4 месяца назад
Bro start making videos again :D
@user-ql1vt7kh9n
@user-ql1vt7kh9n 2 месяца назад
Doesn't work for me
@mateuszderecki7397
@mateuszderecki7397 4 месяца назад
It's NAV! Not Header. Header is section with Web Designer text, button, image etc. It's important for Google robots. Nav!!
@the_obm
@the_obm 3 месяца назад
Nah bro, that's the hero section.
@LOFI-MUNDE
@LOFI-MUNDE День назад
these are all fake comments broo its sooo easy
Далее
I SIMULATED THIS EURO 2024 GAME.. 🤯
00:13
Просмотров 1,7 млн
How To Create Custom Header & Footer in WordPress
25:59
Elementor Header Tutorial: 100% FREE Method
19:48
Просмотров 168 тыс.
I SIMULATED THIS EURO 2024 GAME.. 🤯
00:13
Просмотров 1,7 млн