Free Elementor Sticky Transparent Header Tutorial. [Sticky Header On Scroll Effects] No CSS, No BS😜

No video

Free Elementor Sticky Transparent Header Tutorial. [Sticky Header On Scroll Effects] No CSS, No BS😜

Рет қаралды 60,430

Күн бұрын

In this video i'll show you how to create a free elementor sticky transparent header. Our transparent sticky header will change color on scroll, shrink sticky header on scroll, hide or display sticky header on set scroll distance and or display/hide sticky header on scroll to top.
So in the case that you created your header using elementor free version, this tutorial is for you. I not only show you how to create a free header in elementor but also show you how to add the sticky header on scroll effects in elementor for free without writing any css.
Enjoy the tutorial.
Here is a step by step blog post: gotechug.com/f...
Download my Free WordPress Beginner Toolkit: gotechug.com/t...
Timestamps:
Creating a Free Header in Elementor 01:50
Make Header Sticky in Elementor 06:05
Make Header Transparent in Elementor 07:04
Change Background Color on Scroll in Elementor 08:16
Shrink Header on Scroll in Elementor 9:26
Blur Sticky Header Background in Elementor 10:24
Hide Header on Scroll Down in Elementor 11:28
Elementor Transparent Header on Table and Mobile 12:10
_______________________________________________________
🛠 Download my Free WordPress Beginner Toolkit: gotechug.com/t...
⚙ Gear I Use (entire camera and recording equipment): www.amazon.co....
_______________________________________________________
Get a Domain and WebHosting
🔵 Hostinger: gotechug.com/h...
🔵 Blue Host: gotechug.com/bl...
🔵 InMotion Host: gotechug.com/in
🔵 Hostgator: gotechug.com/h...
_______________________________________________________
✅Get Envato Elements ( Thousands of Elementor Templates): gotechug.com/en...
Preferred Elementor Themes
✅OceanWP theme: gotechug.com/o...
✅Astra theme: gotechug.com/a...
✅Kadence theme: gotechug.com/k...
✅Blocksy theme: gotechug.com/b...
_______________________________________________________
Awesome Elementor Addons & Plugins
✅Get Premium Addons here: gotechug.com/pr...
✅Get Elements Kit Addons for Elementor: gotechug.com/ek
✅Get Element Pack: gotechug.com/el...
✅Get Ultimate Addons for Elementor: gotechug.com/uae
✅Get Essential Addons for Elementor: gotechug.com/es...
✅Get Piotnet Addons for Elementor: gotechug.com/pafe
✅Get The Plus Addons for Elementor: gotechug.com/t...
✅Get NitroPack: gotechug.com/Ni...
_______________________________________________________
Productivity Tools
🔔Get LastPass Password Manager: gotechug.com/la...
🔔Hire on Fiverr (Get 20% off 1st Order): gotechug.com/fi...
_______________________________________________________
🔔Subscribe to my newsletter
gotechug.com/n...
Follow GoTechUG on Social Media
/ gotechug
/ gotechug
For business inquiries send to: hamza@gotechug.com
Background Music: By Ben Sound
DISCLAIMER: This video and description may contain affiliate links, which means that if you make a purchase through one of the product links, I’ll receive a small commission at NO Extra Cost to you. That way, it helps support this channel and make more videos just like this.
Thank you

Пікірлер: 175

@jaredwhispers 3 жыл бұрын

Just a few days ago I was thinking how should I edit code to do this, and you release a video with no code, easy, lots of extra features and on top of all, free. Thank you very much. Cheers from Puerto Rico. :)

@juliesepulveda5206 Жыл бұрын

Exactly what I needed! Thanks for being so thorough and to the point!!! You got yourself a new follower!

@OliviaDeMelo Жыл бұрын

I second this!

@organicseoireland4988 11 ай бұрын

Dude saved me! I couldnt get the sticky header and I did not know you needed the plugin for it to work with Elementor! Saved my day ty!

@vipulPereraArunashantha 3 ай бұрын

great tutorial Bro ! I serched the way to a make this kind of sticky header . Finally found it for free ! ...........Respect your effort . Thanks plus

@RedubbledD 3 жыл бұрын

I almost gave up on finding a way to create a sticky / hide on scroll header for free. till i found this vid. thank you very much!

@walermitty6096 2 жыл бұрын

Great video no BS

@monespacewebe 2 ай бұрын

Je suis vraiment content, vous m'avez bien aidé à trouver cette extension magique. Merci beaucoup

@GoTechUG Жыл бұрын

**NEW Course Alert** Enroll in my Elementor Pro BootCamp Course and learn to maximize Elementor Pro's dynamic and advanced features without coding. Get it NOW 40% OFF bootcamp.gotechug.com/

@treblemusichub4875 2 жыл бұрын

Hello Hamza, I am a Ugandan. I am so proud of You and I have learnt alot from your work here on Tube. Thank You Brother. I desire to meet you soon. You make Uganda Shine when you teach

@GoTechUG 2 жыл бұрын

Awwww 🥳🥳🥳 Thank you for your feedback. Maybe one day, we'll meet.

@Adam-in8nr 2 жыл бұрын

A big "Thank You"! Was just the thing I was looking for!

@ilhamenan 6 ай бұрын

you are the best bro. thanks a lot. keep up the good work

@lucilel2766 2 жыл бұрын

Thank you very much!!!! I saw a lot of video which made me lost my time, yours is perfect!! best clear and easy way!

@histuta 2 жыл бұрын

Thank you so much for the Elementor stcky header plugin. thanks much much. it worked.

@GoTechUG 2 жыл бұрын

Always great to know that this video still helps out people like you Histuta. All the best.

@HeatherCairncross 2 жыл бұрын

Excellent clear video - thank you! I use Elementor free version with pro Essential addons and I've been trying to work this out for ages. Cheers from the south coast of England!

@RomeohRamone 3 жыл бұрын

This is maybe the only video that I found that provided a step by step process to do something great! kudos!

@hiddendream91 Жыл бұрын

Thanks a lot! I've been struggling with creating the header in the free version and this video helped me!

@HazelAndrewsAcupuncture 2 жыл бұрын

Fantastic! I now know my header will be fine after following your tutorial. :)

@hoanguccanh5991 11 ай бұрын

Thank u so mụch, this is every things that i need

@mindvalley8022 2 жыл бұрын

thanks lot bro Hamza . u r the best . i watched many vedios on youtube explaining sticky transparnt header but you did the best , direct clear simple .. hugs

@GoTechUG 2 жыл бұрын

So nice to read this. All the best mind valley ☺️☺️☺️

@paramtatvayog3348 2 жыл бұрын

THANK YOU BROTHER.......GREAT VIDEO I GOT ITS REALLY 100%...THOUSAND LIKES TO YOU.....GOD BLESS YOU BRO.

@victoriahibbins698 2 жыл бұрын

Finally - took me to many searches to find this! :) brill

@peetman192 2 жыл бұрын

Exactly what I was looking for! Thank you so much!

@muhammadmahin357 Жыл бұрын

Thank you bro From Bangladesh💜

@debrawestbrook8960 2 жыл бұрын

YOU ROCK!!! Thanks So Much!!!

@himanshichinchkhedkar9110 3 жыл бұрын

Thank you so much friend..I don't know coding and had searched entire youtube for my sticky header. Thank you so much to make it finally possible for me🤘👍

@Pxbilili2010 7 ай бұрын

thank you Sir from france

@smfcontato 3 жыл бұрын

this is the best video with solution for header change color. But how change color of the text link navmenu on scroll?

@anontic9132 3 жыл бұрын

What a way to start 2021... Hamza, I can't thank you enough.

@GoTechUG 3 жыл бұрын

Thank you Anon for watching.

@timen.space. Жыл бұрын

Thank you, worked perfectly! I set the sticky header to activate after 1 px of scrolling and it gives a pretty seamless experience (at least on desktop).

@marshad1472 9 ай бұрын

Really helpfull video! Thank alot

@giftsharegraphics Жыл бұрын

This tutorial is perfect! Thanks so much!!!

@Rejoin_2023 Жыл бұрын

You are a brilliant teacher. This is exactly what I wanted. Many thanks.

@GoTechUG Жыл бұрын

Great to know that this helped you.

@leychen2316 5 ай бұрын

That's awesome.

@moce4944 Жыл бұрын

Thanks a lot it was sooo helpful. I subscribed. Looking foward for more content.

@pepsyk0 2 жыл бұрын

yeaaaa, thank you sir!!! you saved me :)

@napendakonyagi7397 Жыл бұрын

Simple and straight forward what more can you ask for in a content, thanks bro. Lots of love from neighbour 🇰🇪

@JuanTheGardener Жыл бұрын

you re the boss

@marianocalvo94 2 жыл бұрын

nice job!!! keep posting videos about what we can do with elementor free. thanks !

@arulnelson6322 3 жыл бұрын

Awesome man its worked well

@rockerdudsch Жыл бұрын

Exactly what I was looking for. Thanks dude!

@sarahmine7530 2 жыл бұрын

You are the best!!!

@gonzalomarquesini3216 Жыл бұрын

Excellent instructions - thanks!

@chriskern163 Жыл бұрын

Thank you so much! this is exactly what I was looking for, and saved me shelling out for a paid theme!

@valentinariots Жыл бұрын

Thank youuuu :)

@faraipascal 2 ай бұрын

Thank you so much. WOW

@martindimitrov7375 2 жыл бұрын

Thank you, bro!

@plomero_del_titanic 2 жыл бұрын

You've saved my life. It works perfectly, thank you so much!

@GoTechUG 2 жыл бұрын

🥰🥰

@docallogs4370 Жыл бұрын

awesome content!

@yulianloaiza 2 жыл бұрын

Thank you!!

@viswavijay7773 3 жыл бұрын

Thank you man it really helped me!!! Keep on working you will be at the top I promise

@mvijar Жыл бұрын

Thank you!

@welovetherhythm 2 жыл бұрын

Thanks brotato! This is so helpful.

@seoxpert7073 3 жыл бұрын

Wow thank you very much

@jeremylevifmusic 2 жыл бұрын

Thank you so much! :)

@markusb.6759 2 жыл бұрын

Great explanation. Works perfectlly. Regards from germany!

@GoTechUG 2 жыл бұрын

Great to hear!

@abrahamecharry3092 Жыл бұрын

THANK YOUUU!

@asnazohair2669 2 жыл бұрын

Thank you so much. This video was really helpful!

@joannacort6492 3 жыл бұрын

you are awesome

@durjoysoldier9650 3 жыл бұрын

you too

@mohammedfayiz6171 10 ай бұрын

thanks mate 😍😍👍👍

@noeliagonzalez9908 2 жыл бұрын

Thank you! Very helpful!

@emmanuelanu-oluwatomiwa9071 2 жыл бұрын

Thank you. You explained it really well. Glad it worked!

@emmanuelanu-oluwatomiwa9071 2 жыл бұрын

What if I want the header to be permanent, and for it to show up when scrolling up on mobile?

@sohailvirani5272 2 жыл бұрын

Thank You man really appriciate it....kepp growing :-). why your subscribers are less i think i should give you plus one :)

@GoTechUG 2 жыл бұрын

So nice of you

@stanartur3908 2 жыл бұрын

tnx bro, without words

@yuji20itadori Жыл бұрын

simple and straight to point love it :D

@BennettShop 2 жыл бұрын

thank you so much man

@mralexodd 2 жыл бұрын

Doesn’t work for me. Nothing happens when having the sticky header effects enabled. Any reason why?

@JshN08 3 жыл бұрын

Just what I was looking. Thank you!

@kevinhartog5079 2 жыл бұрын

excellent video!

@GoTechUG 2 жыл бұрын

thanks Kevin

@kchris07252 2 жыл бұрын

fantastic!! thanks for this video 🙏🙏

@sohanibanerjee 2 жыл бұрын

thanks a lot ..your video solved my problem and save lots of time..

@oratobe 3 жыл бұрын

Thank you Bro... You're truely God-sent

@abdullahiqbal36 3 жыл бұрын

Thank you so much, Brother Hamza! JazakAllah

@Khtan.k 3 жыл бұрын

Thaaaaaaank you soooo much brother

@Thiarara1 3 жыл бұрын

Learn a lot. Keep up.

@GoTechUG 3 жыл бұрын

Great to know.. All the best Thiarara.

@relationship526 3 жыл бұрын

Thanx bro 👍🏼👍🏼

@tharindunoragalla1725 3 жыл бұрын

Thanks for lesson ❤

@nerdhp 3 жыл бұрын

Thank you so much!

@tihamichahdi4236 2 жыл бұрын

thanks for the video

@GoTechUG 2 жыл бұрын

You're welcome

@godswilldaudu2593 3 жыл бұрын

Thank you very much, it helped me achieve what I wanted.

@StaroneCan 3 жыл бұрын

Many thanks!!!

@Seagullphilip 3 жыл бұрын

Thank you so much Hamza

@Ahmetsen968 Жыл бұрын

thank you :)

@miedzyrzecki Жыл бұрын

thx a lot bro

@Hellonovadonna 2 жыл бұрын

Thank you so muchhh

@Hellonovadonna 2 жыл бұрын

perfect !

@qnaaa1 3 жыл бұрын

Thank you!!!! Amazing video you helped me a lot!

@GoTechUG 3 жыл бұрын

This is great to know. Thanks for watching

@infogruppotrenta5719 2 жыл бұрын

SUPER

@matt_duma81 3 жыл бұрын

Great video 👏 Thanks a lot 🙂

@falcontimesnow Жыл бұрын

every time you rocks

@masterit123 2 жыл бұрын

This is a great tutorial.This plugin only works with the Elementor pro version. Kinda bummed about it.

@MYnetech 4 ай бұрын

good job！

@Timon2200 3 жыл бұрын

Amazing, tried 3 tutorials non of them worked. Thank you!

@GoTechUG 3 жыл бұрын

Hey Mortu, so glad this could work for you.

@MikkelNyvang 3 жыл бұрын

Good video. But i have a question. When the header is set to not transparent, and i scroll down, it makes a weird ''click'' effect? Like it scrolls further down when the sticky header apears?

@saulosrcv 3 жыл бұрын

Having the same issue. Any luck changing it so far?

@robertwattner 3 жыл бұрын

Hey guys, I'm the developer for this plugin. The page jump you are experiencing is the header being removed from the overall page height and being brought to the front to overlap. This is the reason the plugin says it's for the pro version of elementor, which has the sticky option. Basically if the header starts out sticky then there is no jumpy transition to becoming sticky. This is just an issue when implementing sticky headers in general. The page height changes when the header goes back and forth from being sticky.