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

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/free-sticky-tran...
Download my Free WordPress Beginner Toolkit: gotechug.com/toolkit/
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/toolkit/
⚙ Gear I Use (entire camera and recording equipment): www.amazon.co.uk/shop/gotechug
_______________________________________________________
Get a Domain and WebHosting
🔵 Hostinger: gotechug.com/hostinger
🔵 Blue Host: gotechug.com/bluehost
🔵 InMotion Host: gotechug.com/in
🔵 Hostgator: gotechug.com/hostgator
_______________________________________________________
✅Get Envato Elements ( Thousands of Elementor Templates): gotechug.com/envato
Preferred Elementor Themes
✅OceanWP theme: gotechug.com/oceanwp
✅Astra theme: gotechug.com/astra
✅Kadence theme: gotechug.com/kadence
✅Blocksy theme: gotechug.com/blocksy
_______________________________________________________
Awesome Elementor Addons & Plugins
✅Get Premium Addons here: gotechug.com/premiumaddons
✅Get Elements Kit Addons for Elementor: gotechug.com/ek
✅Get Element Pack: gotechug.com/elementpack
✅Get Ultimate Addons for Elementor: gotechug.com/uae
✅Get Essential Addons for Elementor: gotechug.com/essential-addons
✅Get Piotnet Addons for Elementor: gotechug.com/pafe
✅Get The Plus Addons for Elementor: gotechug.com/theplusaddons
✅Get NitroPack: gotechug.com/NitroPack
_______________________________________________________
Productivity Tools
🔔Get LastPass Password Manager: gotechug.com/lastpass
🔔Hire on Fiverr (Get 20% off 1st Order): gotechug.com/fiverr
_______________________________________________________
🔔Subscribe to my newsletter
gotechug.com/newsletter/
Follow GoTechUG on Social Media
/ gotechug
/ gotechug
For business inquiries send to: [e-mail]
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

[@jaredwhispers]

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

[@RomeohRamone]

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

[@organicseoireland4988]

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!

[@peetman192]

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

[@jaggyjoo]

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

[@HazelAndrewsAcupuncture]

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

[@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).

[@viswavijay7773]

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

[@napendakonyagi7397]

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

[@JshN08]

Just what I was looking. Thank you!

[@himanshichinchkhedkar9110]

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🤘👍

[@HeatherCairncross]

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!

[@hiddendream91]

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

[@chriskern163]

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

[@RedubbledD]

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!

[@juliesepulveda5206]

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

[@OliviaDeMelo]

I second this!

[@rockerdudsch]

Exactly what I was looking for. Thanks dude!

[@victoriahibbins698]

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

[@giftsharegraphics]

This tutorial is perfect! Thanks so much!!!

[@gonzalomarquesini3216]

Excellent instructions - thanks!

[@asnazohair2669]

Thank you so much. This video was really helpful!

[@yuji20itadori]

simple and straight to point love it :D

[@welovetherhythm]

Thanks brotato! This is so helpful.

[@noeliagonzalez9908]

Thank you! Very helpful!

[@marshad1472]

Really helpfull video! Thank alot

[@debrawestbrook8960]

YOU ROCK!!! Thanks So Much!!!

[@valentinarosei]

Thank youuuu :)

[@moce4944]

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

[@abdullahiqbal36]

Thank you so much, Brother Hamza!
JazakAllah

[@ilhamenan]

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

[@arulnelson6322]

Awesome man its worked well

[@hoanguccanh5991]

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

[@leychen2316]

That's awesome.

[@vipulPereraArunashantha]

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

[@lucilel2766]

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

[@godswilldaudu2593]

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

[@Rejoin_2023]

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

[@GoTechUG]

Great to know that this helped you.

[@emmanuelanu-oluwatomiwa9071]

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

[@emmanuelanu-oluwatomiwa9071]

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

[@histuta]

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

[@GoTechUG]

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

[@plomero_del_titanic]

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

[@GoTechUG]

🥰🥰

[@docallogs4370]

awesome content!

[@anontic9132]

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

[@GoTechUG]

Thank you Anon for watching.

[@tharindunoragalla1725]

Thanks for lesson ❤

[@yulianloaiza]

Thank you!!

[@martindimitrov7375]

Thank you, bro!

[@matt_duma81]

Great video 👏 Thanks a lot 🙂

[@kchris07252]

fantastic!! thanks for this video 🙏🙏

[@jeremylevifmusic]

Thank you so much! :)

[@mvijar]

Thank you!

[@nerdhp]

Thank you so much!

[@monespacewebe]

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

[@walermitty6096]

Great video no BS

[@sarahmine7530]

You are the best!!!

[@seoxpert7073]

Wow thank you very much

[@abrahamecharry3092]

THANK YOUUU!

[@BennettShop]

thank you so much man

[@StaroneCan]

Many thanks!!!

[@qnaaa1]

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

[@GoTechUG]

This is great to know. Thanks for watching

[@sohanibanerjee]

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

[@oratobe]

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

[@mohammedfayiz6171]

thanks mate 😍😍👍👍

[@pepsyk0]

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

[@marianocalvo94]

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

[@faraipascal]

Thank you so much. WOW

[@Seagullphilip]

Thank you so much Hamza

[@paramtatvayog3348]

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

[@Khtan.k]

Thaaaaaaank you soooo much brother

[@kevinhartog5079]

excellent video!

[@GoTechUG]

thanks Kevin

[@mindvalley8022]

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]

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

[@stanartur3908]

tnx bro, without words

[@muhammadmahin357]

Thank you bro
From Bangladesh💜

[@Hellonovadonna]

Thank you so muchhh

[@Hellonovadonna]

perfect !

[@Thiarara1]

Learn a lot. Keep up.

[@GoTechUG]

Great to know.. All the best Thiarara.

[@relationship526]

Thanx bro 👍🏼👍🏼

[@markusb.6759]

Great explanation. Works perfectlly. Regards from germany!

[@GoTechUG]

Great to hear!

[@Pxbilili2010]

thank you Sir from france

[@tihamichahdi4236]

thanks for the video

[@GoTechUG]

You're welcome

[@miedzyrzecki]

thx a lot bro

[@Ahmetsen968]

thank you :)

[@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/

[@smfcontato]

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

[@infogruppotrenta5719]

SUPER

[@MYnetech]

good job！

[@JuanTheGardener]

you re the boss

[@sohailvirani5272]

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

[@GoTechUG]

So nice of you

[@treblemusichub4875]

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]

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

[@icareerglobal9673]

great one ...:)

[@GoTechUG]

Thank you! Cheers!

[@biteshrout3434]

thanks bro

[@joannacort6492]

you are awesome

[@durjoysoldier9650]

you too

[@Yogoflife]

Thanks brother ❤

[@GoTechUG]

Always welcome brother

[@avinashobanahalli1899]

Thanks

[@RolyPolyGames]

This was a really handy video! One thing I noticed is my Menu has links that are for sections on the same page that you can jump to. These do not seem to show up on the sticky header. Any idea how to get custom links to show back up on it?
E: Figured it out the menu was using the wrong one! Serves me right for naming it too close to the default. Either way its all fixed and looks lovely. Thank you for the great tutorial.

[@Timon2200]

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

[@GoTechUG]

Hey Mortu, so glad this could work for you.

[@mralexodd]

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

[@syedumair9554]

thanks

[@falcontimesnow]

every time you rocks

[@guilhermebehling]

Thank you so much, bro. Helped me a lot! What is the best practice when some of the content in the page falls behind the header at the top of the page? I tried increasing the padding of the section but in some devices it's a little buggy. Thank you!

[@GoTechUG]

Increase the z-index for the header or items in the header.

[@user-tr7zv7el1s]

Good video.
Will it be possible to create different headers for different pages in Elementor free version ?
Emphasis on free version.

[@withlovekaye]

Hi! I've tried to follow every step of this video but I can't seem to find out what's wrong. The sticky header is working on preview mode and right after I update it but when I do refresh the page and go to other pages to try it out, it won't work. Also, the header itself is not showing up when I check the website directly. I hope I explained everything clearly.
A response from you will be highly appreciated! Thank you in advance! :)

[@kcmthedesigner]

Excellent and very straightforward tutorial. How do you restrict the sticky header from going through the footer section?

[@kcmthedesigner]

I figured it out, I adjusted the footer to accommodate for the sticky header. 😉