Change To A Different Header On Scroll Using Elementor

[@MVSNL]

Thanks!

[@macropsialberto]

Very useful, thanks a lot!, Greetings from Bogotá, Colombia :)

[@mohamedlarbilaib1438]

Thanks very much! You save my life. It was really helpful.

[@SurSaifur]

Thanks. It worked

[@SurSaifur]

Thank you very much. It worked

[@sandsand5173]

You are the one who saved me, after my departure from long agony and many attempts. Thank you from the heart. I tried to add a third header. so that I lay from under, like a page footer, Unfortunately, the experiment was not successful. I hope if you can help me😢 Thank you very much

[@Blogaholik]

Thanks Man, I have since extended it to hide the previous menu so I can make menus that are wide by default then also becomes thin on scroll...

[@markpfister7866]

Great tutorial! Instead of sliding the header in, is there a way to do a dissolve from one header to another?

[@AsadAli-tz3ep]

i have watched this many times

[@anenov]

Thank you!

[@hasaneraydin741]

👏 Thank you very much

[@alirezasahami1175]

Thank you very much it solved my problem. but i have a question. Is it ok for SEO purposes? i mean search engine may detect duplicate menus

[@meyzle]

Thanks a lot!

[@P1CKUPTHEPACE]

you always have the video I need bro and explain it in the perfect way.

[@UrielSoto]

That means a lot man. I always wonder if I explain things properly.

[@lukeshenefield9470]

Hi Uriel! Thank you for this and I think it's lovely - except now when I want to edit my header I can't see it any more. I can see the "front page header" title I gave it, and the Elementor "drag widget here" area, but nothing else. Any thoughts? Thank you.

[@Javiergcrespo]

Thank you so much, it was very helpful

[@ShajuChandrathil]

Thanks for this video. I found there is some issue with mobile. Mobile menu is clipping inside the header. I think the Transform and translateY properties causing stacking context issue. Not just mobile menu, even the Offcanvas menu is clipping inside the header.

[@10-Minute-Tips]

Thank you

[@MrJacovorster]

would there be a way to make the transition happen on the same time as a specific section on my website? Instead of having to guess where that point is with px? Great video, by the way! Thank you

[@oskarkampik8882]

Same question here - you found a solution?

[@akhonazembe6075]

Thank you so much, I'll ry this, but is there no free plugin to do this now? I mean the video was done 2 years ago.

[@hwythan]

it worked well on mobile?

[@isurusandamal9697]

can we add fade effect instead of going up when scrolling header change to sticky header?

[@HadirMengedukasi]

man, i wanna ask, if the dropdown has open an then you scroll the page, whether the dropdown has error or anything its to do? i just wanna know the transition of dropdown :)

[@skt93200]

merci beaucoup

[@Michelle-vo2sc]

Hey, this was so helpful! Thank you very much! 🙏🏻🙏🏻 it works perfectly in chrome but not in safari. In safari, the position when the headers switch are not correct. Can you help me? :)

[@arashebrahimi2974]

how can change header color when scroling every section in elementor?

[@MMoradi-f7k]

thanks for your video. i did all steps but in mobile platform the hamburger menu opens under main content what is the problem? i am using elementskit for menu. is it related to that?

[@UrielSoto]

There's a setting built in elementor. I that helps adjust that's. I think it's called distance or something in the dropdown settings

[@kotik1981]

hi there, did you manage to fix that plz?

[@UmbertoNapoletano]

Hey! How i can display the new header after 100vh? if i set this in if (y = 100vh) don't work

[@adeeljabbar25]

what if I do not want to show sticky on mobile? Just want to show on desktop

[@yisakdemeke9085]

on mobile mode i have difficulties making the same effect

[@izulajaa2261]

oh god... im try, but not work

[@unsignedhub]

Thank you!!!