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

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

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

[@juliesepulveda5206]

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

[@OliviaDeMelo]

I second this!

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

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.

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

[@smfcontato]

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

[@monespacewebe]

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

[@hiddendream91]

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

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

[@mralexodd]

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

[@odalisnoguera6632]

Love the video! When I want to change the logo color it's not working. Do you know why?

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

[@moce4944]

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

[@ZaahedaHaffejee]

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

[@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 ☺️☺️☺️

[@happiestbunniestv3979]

amazing video. But I have this tiny white space ontop for some reason.. can't seem to get that away

[@RomeohRamone]

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

[@MikkelNyvang]

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]

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

[@robertwattner]

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.

[@paramtatvayog3348]

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

[@Adam-in8nr]

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

[@peetman192]

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

[@giftsharegraphics]

This tutorial is perfect! Thanks so much!!!

[@jeanm7115]

Looks great solution. But I've got a small issue. (video at 4:30) you show on the search for menu, 5 options and the one you needed is Navigation Menu "HFB" . I have all the rest except this option. Why I cannot see my HFB Navigation Menu? How to get it on the list to choose it. Thank you in advance.

[@ilhamenan]

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

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

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

[@walermitty6096]

Great video no BS

[@srujanachavala]

I want my header and footer to be fixed permanently is it possible when the new page is created it should appear automatically. Is it possible?

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

[@masterit123]

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

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

[@hoanguccanh5991]

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

[@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! :)

[@smcreationbengali]

Will it work in theme customization?

[@moniqueclarke1334]

How do you fix the gab that the sticky header creates on the mobile version please?

[@marianocalvo94]

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

[@ehababumoailish6574]

I need help for adjusting background images/ slide show using elementor as it’s not fitting properly

[@gonzalomarquesini3216]

Excellent instructions - thanks!

[@kevonlifestyletv5313]

Nice Video! I followed everything, but may I know how to get rid of the space on top of the header? in 13:31?

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

[@napendakonyagi7397]

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

[@rockerdudsch]

Exactly what I was looking for. Thanks dude!

[@nancykessler9348]

This process added a footer with Mountain logo and information. How do I delete or edit that?

[@victoriahibbins698]

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

[@afaf5708]

thank you! the blur option is not working for me, I cleared the cache but still not working

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

[@blanchepalard4605]

Hi, just seen your video. How could we change the color of the text in the menu once we scroll ? Because my menu was written in white on a transparent sticky menu and I want to swich for another color since my sticky menu is white once I scrolled down 🤗 Any advises ?

[@Rejoin_2023]

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

[@GoTechUG]

Great to know that this helped you.

[@welovetherhythm]

Thanks brotato! This is so helpful.

[@anontic9132]

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

[@GoTechUG]

Thank you Anon for watching.

[@partha2utub]

Can we do the same with footer?

[@frfzffezf6044]

Can I change the whole header when scroll down?

[@chriskern163]

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

[@marshad1472]

Really helpfull video! Thank alot

[@anouskairene6825]

my problem is i build the site title and navigational menu in the two grid section, all looks great, then i publish it and the navigational menu side disappears? wordpress keeps putting the navigational menu as a footer menu- could this be the issue and how do i solve it? i am really new to wordpress!

[@asnazohair2669]

Thank you so much. This video was really helpful!

[@viswavijay7773]

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

[@plomero_del_titanic]

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

[@GoTechUG]

🥰🥰

[@debrawestbrook8960]

YOU ROCK!!! Thanks So Much!!!

[@dangerzone6023]

Although the transparent option is turned off, the header is always transparent, why do you think?

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

[@harisjawed570]

@GoTechUG bro this this sticky header menu aren't working in 2023 as i had tried to become my header sticky but it isn't ,please help me how i can do my header sticky ,i am in serious trouble ,i have been trying for three days but couldn't word please help me bro 😥

[@noeliagonzalez9908]

Thank you! Very helpful!

[@RodolfoRuiz-gh6xi]

I downloaded the plug in but in the plugin description it says its an extension for elementor pro. Are you still able to do this trick or is it really only for elementor pro

[@sohanibanerjee]

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

[@markusb.6759]

Great explanation. Works perfectlly. Regards from germany!

[@GoTechUG]

Great to hear!

[@JshN08]

Just what I was looking. Thank you!

[@abdullahiqbal36]

Thank you so much, Brother Hamza! JazakAllah

[@muhammadmahin357]

Thank you bro From Bangladesh💜

[@kchris07252]

fantastic!! thanks for this video 🙏🙏

[@AudioDestinyHQ]

Thank you that was the best. It's quite misleading with the sticky effects when it says this is ONLY for pro.

[@arulnelson6322]

Awesome man its worked well

[@pepsyk0]

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

[@godswilldaudu2593]

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

[@yuji20itadori]

simple and straight to point love it :D

[@sellyoursecrets1873]

amazing please how to fix header after designing website?

[@oratobe]

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

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

[@martindimitrov7375]

Thank you, bro!

[@docallogs4370]

awesome content!

[@leychen2316]

That's awesome.

[@yulianloaiza]

Thank you!!

[@tharindunoragalla1725]

Thanks for lesson ❤

[@qnaaa1]

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

[@GoTechUG]

This is great to know. Thanks for watching

[@Timon2200]

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

[@GoTechUG]

Hey Mortu, so glad this could work for you.

[@FishaNostalgia]

thank you Sir from france

[@jeremylevifmusic]

Thank you so much! :)

[@faraipascal]

Thank you so much. WOW

[@Jamal-dc1tl]

Will that plugin work for OceanWP theme as well? Or only for ASTRA?

[@GoTechUG]

Works well with OceanWP too.

[@Jamal-dc1tl]

@@GoTechUG Thank you bro!

[@spurkay2]

When I go to Edit with Elementor I do not see all the widgets that you have on your screen. I only see the basic elementor widgets. There are no widgets for site logo, or search or navigation menu etc. that are listed with the header and footer blocks plugin. Where do I get these?

[@lijojoseph5445]

Bro... I want white sticky header. When i gave transperant header with menu item colors in white and turning in to sticky white background header the menu items color is not visible as it is white in transperant. How to fix that? Can u help

[@GoTechUG]

If your menu items are in white and sticky background is white, menu won't be visible. If you want to maintain sticky white background change menu items color on scroll or reduce sticky background color transparency.

[@matt_duma81]

Great video 👏 Thanks a lot 🙂

[@cryptophilip-l7e]

Thank you so much Hamza

[@abrahamecharry3092]

THANK YOUUU!

[@mohammedfayiz6171]

how to set different Menu Text colours when Scrolling in Elementor

[@BennettShop]

thank you so much man

[@Thiarara_superWP]

Learn a lot. Keep up.

[@GoTechUG]

Great to know.. All the best Thiarara.