Changing Headers On Scroll with Elementor Sticky Headers

✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
My goal is to create a community for Web Designers, Developers, Freelancers, and Elementor enthusiasts to learn the design & business side of creating websites.
Got questions? You can reach me anytime - lytboxacademy.com/contact/
CSS code has been moved to my blog post.
Find the CSS here 👉 lytboxacademy.com/changing-he...
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Timestamps:
Start tutorial: 1:20
Adding headers: 2:15
Adding CSS classes: 4:22
Adding CSS: 6:47
Adding Sticky Effect: 7:10
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elementortutorial #elementorheaders #elementorstickyheaders

[@bytecrusader]

Man God bless you, you just saved me !!! i have been scrolling on youtube since two days now looking for this change of header effect, have watch countless videos and each time i don't get what i want i feel like crying

[@Valitzu777]

One of the best, clear and easy-to-follow tuts I've ever had to pleasure of watching and applying to my site... thank you so much, great job!

[@LytboxStudio]

So glad to hear it helped. Thanks! 🙏

[@human-ai-music]

It's amazing when you find exactly the content you're looking for. Thankyou so much!! This is very very helpful. 👍

[@brandcampagency6141]

This is a GREAT tutorial. So straight ahead and super efficient. Thank you, Sir!

[@LytboxStudio]

Thanks!🙏

[@keyzack]

Just tried it with the lastest elementor version. It works pretty great! only with the Fade out Css, but it all worked out changing the transition value from: opacity to all, and cutting the !important in the last statement. Thank you very much!

[@DanielMarinMusic]

THANK YOU!!! This fixed exactly what I've been looking for the past couple of hours :D

[@LytboxStudio]

So glad to hear. Thanks! 🙏

[@DeoptochtSchaijk]

Super thanks, I always enjoy using your tutorials. Keep up the good work!

[@amishagarwal3151]

This is awesome! You are really doing a service by providing us these tutorials for free.

[@LytboxStudio]

Many Thanks 🙏💜

[@taylorpatterson5871]

This was dope. Super straight forward, super easy to follow. Implementing this on my new site now. Subscribed.

[@LytboxStudio]

Many thanks! 🙏

[@iZonama]

Deleted my website header yesterday by accident and had to redo it as fast as possible. THIS IS THE FASTEST video tutorial I have found. Give the man a medal!!

[@LytboxStudio]

Haha so glad to hear!!!

[@WShawn]

Excellent tutorial, thanks! Clear and to the point with just the right amount of information.

[@LytboxStudio]

I appreciate that Shawn, thanks! 🙏

[@nicholasleitten8946]

Thank you so much! Watched the video and read through the blog simultaneously. I've been struggling to get this feature added and it now works great!

[@LytboxStudio]

So glad to hear it worked for you! Thanks!

[@nicholasleitten8946]

@@LytboxStudio Quick question.. I've added this feature and it works great however when I switch to mobile few it's not looking/work as great. any insight?

[@paoladi0405]

Thank you so much! I saw many tutorials with the same info. But because you explained what was everything I found out why it didn't work for me!

[@diegoviale4548]

Excelente. Primer tutorial de menú de este estilo para Elementor que encuentro que funciona realmente. Gracias.

[@bernardomaia6855]

OMG I was searching for this solution and couldn't find it. And then I found this video that was EXACTLY what I needed! Thank you so much!

[@LytboxStudio]

I'm so glad to hear! Thanks!

[@katharinemadden]

Thank you! I really appreciate you making this in response to my question on one of your other videos. It took me a while to get to it as I was focusing on other aspects of the site this past week, but I was able to do it this evening and it worked perfectly.

[@LytboxStudio]

So glad to hear!

[@katharinemadden]

@@LytboxStudio Hi, again! Although I said that the header was working really well, I realise now that I'm testing everything for responsiveness that there's a place between the 768px and 1025px breakpoints where the header overlaps the page title. I've tried creating a third header as a responsive header but even that's overlapping the page title. Increasing the 768px breakpoint doesn't help much and, as far as everything else is concerned, I'd rather the breakpoint remain as is. As the site is essentially ready to go other than this issue, I've just quietly made the site live so I can ask a few folk to try it out on different screen sizes, rather than my relying on shrinking my browser. If you've got a moment to take a look at the issue and perhaps figure out what I'm missing I'd be hugely grateful. I realise I'm asking you to take time doing this but it could, of course, give you another video topic. 😊 If so, the URL is jamesperloff.net

[@Rigoberto713]

Hello! First of all thanks for the tutorial Jeffrey. You explain it very well :) I have done it and I have several issues in mobile. It works perfectly on desktop but on mobile there are different errors in Chrome and Safari. In the first the 2 headers overlap and in Safari when loading the page the header does not exist, only when you scroll down the second one appears and when you scroll up the first one appears. Thanks man! :)

[@clementyo4526]

I like the cam, so clearly. And the light of the room is awesome. So natural since I saw your dog so relax. I like this better than dark room 😁 anyway thanks for the header tips n tutorial

[@LytboxStudio]

Thanks Clement! That's Yoda in the background. Always chillin' 😎

[@clementyo4526]

@@LytboxStudio Yoda is like a boss hahaha awesome 😁

[@WernerHohenegger]

Wow, that is awesome! Thanks for this good tutorial. Very well explained and easy to do! Greetins from Italy!

[@oscar_alopez]

Great tutorial. I was looking for exactly this function, thank you very much

[@LytboxStudio]

Great to hear!

[@dreubz6888]

Thank you kindly for this Jeffrey. Very good video and you explain it very clearly and succinctly. Much appreciated. You have a new subscriber.

[@abbytonyardor3701]

I worship at the alter of your skill. You helped me solve a problem i had been trying to solve for days! Thank you

[@LytboxStudio]

Haha your welcome 😆

[@rockerbellas]

Fantastic tutorial this really helped, really straight forward. Thanks so much!

[@LytboxStudio]

Thanks!🙏

[@Simcha_]

Hi Jeffrey, I rarely ever comment something on KZbin, but I believe u are a real star and truly amazing putting so much great staff online. I didn't manage to make the 2 menus:((, or better the dark menu doesn't disappear and reappear (probably my mistake somehow with the code?) but your videos are amazing. Thx so much. V form Germany

[@lj1634]

You are the best!, please keep making videos like this, it helped me very much

[@LytboxStudio]

Much thanks! 🙏 ❤️

[@mystcam]

Simple and easy, that's what you made me think. Thanks a lot and keep creating new videos

[@LytboxStudio]

Big Thanks! 🙏 And I for sure will 💪

[@BernieDisantis]

Thank you. Great tutorial. Might want to mention that you should remove the negative top margin for mobile resolutions.

[@romina9268]

Great Tutorial.... very simple to understand. Thanks a lot!

[@LytboxStudio]

Thanks!🙏

[@martinkarugaba]

This is just what I was looking for. You just earnes yourself a subscriber.

[@LytboxStudio]

Thanks Marin and I appreciate the sub!

[@developerashifahmed894]

this is so helpful bro. I was in trouble to do this. after all it's done. thank you so much for your great video tutorial bro. appreciate more videos from you bro.

[@LytboxStudio]

Hey Ashif thanks! I really appreciate that 🙏

[@dan87manc]

Great vid, really helped. Straight to the point too. Thanks v much

[@LytboxStudio]

Thank you Daniel 🙏

[@sixartmedia]

Amazing. It is all that I have been looking for. Thanks!

[@LytboxStudio]

Many Thanks 🙏💜

[@hugo0672]

Perfect thank you ! It works perfect, I choose 2nde option personaly (fade in)

[@LytboxStudio]

Perfect! Many Thanks 🙏💜

[@newtrinohair]

Awesome tutorial! Thank you so much!

[@DucVietTran]

Thank you, that's all i need and i looked for it about couple of hours :D .

[@LytboxStudio]

So glad to hear!

[@anastasiasemeniuk779]

This was sooooo helpful! Thank you so much!

[@LytboxStudio]

I am so glad to hear! Thanks!

[@joseauriol6653]

Great tutorial! Greetings from Barcelona, Spain.

[@LytboxStudio]

Hey, thanks Spain! Much ❤️ from Thailand!

[@diagosa]

Thanks so much I searched this many times on google, but here this.

[@LytboxStudio]

I’m so glad to hear! Thanks 🙏

[@StephenPiddingtonLongbow]

That's really helpful. I'm using containers, but it works just the same.

[@user-xn1iq9nc5m]

Great video, thanks for posting

[@mattiamamini403]

Fantastic tutorial, I finally find out a way to realize my dreams ahaha!!

[@LytboxStudio]

Haha so good to hear!

[@nadellaella6416]

The way you explained makes me right away subscribe your channel!

[@LytboxStudio]

Wow thanks! 🙏

[@ventoroverso]

Great tips! Very useful! Thanks

[@LytboxStudio]

Thank you for that!🙏

[@stephencree3076]

Excellent tutorial. Thank you for sharing :)

[@LytboxStudio]

Thanks! 🙏

[@nilsinovic6677]

Thx for your great tutorial! Only one suggestion for improvement: maybe its better to put the z-index of the sticky menu to 100 and for scrollin/fadein menu to 101. figured out some issues, while scrolling down with an open mobile menu (dropdown with toggle).

[@LytboxStudio]

That's a good suggestion. Thanks!

[@asfaque20]

I really wanted to give big shout out to you, it's an amzing video explaining everything so simply. Great. Pleas share more of such stuffs. Looking for how to create Mega Header, if you have already that's great.

[@hungtrandesign]

I like your tutorial. That's very useful. Thank you

[@LytboxStudio]

Glad it was helpful!

[@HarishKumar-qb2ns]

Great video… Liked & subscribed Thanks 😊

[@arthurrobert3086]

Thanks so much about this header effect, not easy to find a tutoriel for that ! :D

[@LytboxStudio]

Happy to help!

[@cacomartin]

Great tutorial! It' works very well 🙌

[@LytboxStudio]

Thanks! 🙏

[@kazishaikh2964]

Thanks! Very helpful video.

[@LytboxStudio]

Much appreciated!🙏

[@roschkovofficial]

thank your for your tutorials! you got my subscription:)

[@LytboxStudio]

Many thanks I appreciate that! 🙏

[@joaotract5558]

Great! The best tutorial, thanks!

[@LytboxStudio]

Thanks!

[@haraldbiesenbach9501]

All sorted out !! Thx a lot 👍

[@LytboxStudio]

So glad to hear!

[@FirstTheyIgnoreYou]

Great video! Thanks a lot! :)

[@LytboxStudio]

Thanks 🙏 Much appreciated

[@PrashantKumar-hm4dt]

Fabulous video. Thanks

[@mobaoart7122]

Thank you very much,my teacher.👍👍

[@chriss.182]

Thank you, I just subscribed.

[@LytboxStudio]

Awesome! Thanks for the sub!

[@kaiserobaldia7207]

Hi nice video, question...How did you make the menu to be automatically in front of the banner, without setting the top margin to negative?

[@morshedsheikh2129]

Thank you . its really help me

[@LytboxStudio]

Many Thanks 🙏💜

[@patrickmullins1788]

Super helpful, thanks!

[@LytboxStudio]

So glad to hear. Thanks! 🙏

[@patriciabirovescu7690]

I loved the tutorial and I love that dog 🤩

[@LytboxStudio]

Haha! That's my boy Yoda!

[@isurusandaruwan4380]

Thanks a lot. I learned a lot from you.

[@LytboxStudio]

Glad to hear that! Many Thanks 🙏💜

[@alik2044]

Thank you so much! Super thanks

[@LytboxStudio]

Thanks! 🙏

[@andonisr]

Nice and simple! Thank you! Perhaps on your next video you can include a shrinking logo? Cheers!

[@LytboxStudio]

I already did that one 😉 check my other videos and you’ll see the Shrinking Logo

[@nhson47]

This what i want, thank you so much!

[@LytboxStudio]

I am so glad to hear thanks! 🙏

[@freelancingpro5788]

great video.......thank you for this tutorial

[@LytboxStudio]

Thanks! I appreciate that 🙏

[@juarang]

Thanks bro! Subscribed.

[@LytboxStudio]

Thanks brotha!🙏

[@arianhernandez4943]

Very very good tutorial. Cheers from Cuba

[@LytboxStudio]

Thanks and awesome seeing someone for Cuba here! I love how we can all connect like this

[@faridgazi6177]

Great tutorial sir. Go ahead. Love from Bangladesh

[@LytboxStudio]

Thank Farid! ❤️ from Thailand

[@jahaddad2511]

Fantastic!!!!!!! Thanks a lot!

[@LytboxStudio]

Thanks! Much appreciated 🙏

[@shaza_laka_zoo2014]

cheerz man, nice work

[@lekhraj1755]

thanks bro, great work

[@LytboxStudio]

Thanks! 🙏

[@shakilit6854]

Thanks of give us this class

[@LytboxStudio]

Many Thanks 🙏💜

[@theredmaster_superbee]

I always felt uncomfortable with learning code ... I'm a graphic designer but looking at his work is so interesting and fun that I definitely want to keep learning ... thanks for your tutorial ...

[@LytboxStudio]

Thanks and so glad to hear! CSS is a great tool to learn fro us designers. Keep it going!

[@hanspaulpons5128]

Finally!!!!!! thanks!!!! i did a lot of things without results and now with your video, it's solved Thanks crack

[@LytboxStudio]

Glad to hear!

[@ilariamast]

awesome background, the doggy

[@LytboxStudio]

That's my boy Yoda 💜

[@virenkumar7908]

Thanks bro...you made my day ❤️

[@LytboxStudio]

Thanks! So glad to hear 🙏

[@user-if2ic2zp5t]

thank you so much!!

[@emunot]

Simply the Best!

[@LytboxStudio]

Many Thanks 🙏💜

[@victorhugosanchezhuerta5715]

¡Thanks, nice tutorial!

[@DKingFisher]

Great Video!

[@LytboxStudio]

Thanks! 🙏

[@jttriana86]

Me acaba de salvar, Gracias

[@devsdude3305]

Much Appriciated :)

[@LytboxStudio]

Thanks!

[@user-ge4bz2oc1u]

Спасибо, очень полезный урок!

[@LytboxStudio]

Спасибо!

[@AbdeljalilHamsterboy]

Hello Jeffrey ! Huge thanks for the fabulous work on your channel, this tutorial is unique and professional. Still I need a bit of your help, I strongly want to have this Header change effect on my website, but I am using Divi theme builder. I tried to copy/paste the CSS and all, but it didn't work. If you have a modified CSS version for Divi theme builder, or any suggestion to make it work for my website, I will enormously thankful to you! Happy coding.

[@60secondsplay84]

Thank you very much.

[@LytboxStudio]

Thanks! I appreciate that 🙏

[@MsAdza85]

Thank You!!!😀

[@LytboxStudio]

So glad to helped! Thanks 🙏

[@ibrahimpashaa9334]

Great Bro thank you

[@LytboxStudio]

Thanks 🙏

[@idcashflow]

Very nice tutorial

[@LytboxStudio]

Thanks! 🙏

[@itepsnguide]

ขอบคุณมากเลยครับ

[@LytboxStudio]

Kap khun krub! 🙏

[@christsohinho1753]

Thanks for the tutorial! I want to make a question. If i wanted to appear the first menu at the 1px of scroll up and not at the top of the page, what should i do? Thanks a lot!

[@parthosarkar5270]

Awesome!!!

[@LytboxStudio]

Thanks Partho!

[@XxHeManWomenHaterxX]

you are a genius!

[@mohammadyasirrajput9471]

Great Job 👍

[@LytboxStudio]

Thank you! Cheers!

[@juanfoncks]

EXCELENTE!!!!!!! me funciono al 100

[@LytboxStudio]

Awesome man! Thanks

[@sarahtragner]

Thank you!!!

[@LytboxStudio]

Your welcome:)

[@shaf747]

Hey man thanks for this awesome guide! just seems to display both headers when you resize the browser window? You had any issues like that? Cheers!

[@LytboxStudio]

Hey Shane sorry for the late reply. Did you find a solution yet? If not let me know and I'll help. Cheers

[@CorradoManenti]

Really nice man

[@LytboxStudio]

Thanks!

[@RaviYadav-vm3xt]

ty so help full

[@LytboxStudio]

Many Thanks 🙏💜