Changing Headers On Scroll with Elementor Sticky Headers | Sticky Header effect | Elementor Pro

In this tutorial, I'll show you hanging Headers On Scroll with Elementor Sticky Headers Effect 🔥 No additional plugin is required!!

CSS CODE:
/* Slide In From The Top Option */

.header-2 {
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}

height: auto!important;
transform: translatey(0px);
}

display: none!important;
}

/* End Of Slide In From The Top Option */

Learn to create amazing WordPress websites without any coding knowledge Using Elementor Page Builder.
We will explore this amazing page builder in this course and create a complete business website during this course using Elementor .
You can start your freelancing career as a WordPress website designer watching this course and learning elementor.
Elementor Full Course:
WordPress Basic Course:

#customwp
#elementor pro

[mohamedniang]

my first time that I comment a tutorial, I wanna just say "NICE JOB".
THANK YOU!!!

[JohnsonAugustine]

I have been toiling for a long time for this with no luck. Thanks a million!!!

[developmentteam-xu]

Nice Job Brother - I just learnt a new thing.

[saulomarques]

Just have tried it and worked perfectly!!! Thanks!!

[slidesheetss]

thanks man, you helping me solved with my problem

[ffzz]

Thank you very much, your trick has saved me this project and many more in the future, you are a boss brother

[AlexandreRenault]

Hey, thanks a lot for this useful tutorial! :)
However, I have an issue with my WooCommerce cart—it doesn't display the preview as it should. I need a lateral preview, but it's cut off. I guess I need to adjust the minimum height for the header-2, but it's a bit of a mess, haha. Any tips? Thxxx

[AbdeljalilHamsterboy]

Billion million trillion thanks for your wonderful tutorial. It was exactly what I needed, PLUS .. no one did a tutorial like this. All other videos are about swapping headers, not revealing header at a special pixel point of a page. you've been HELPFUL !

[albinustejos_com]

This is what i looking for... Thank you...

[jl]

the best I've seen so far!!!! thank you!

[arlindosilva_web]

Depois de assistir mil vídeos... Somente o seu me ajudou! Obrigado!

[binatenoor]

Very good tutorial, thank you so much for sharing this!

[banomobile]

Man you are a life saver
Worked flawlessly

[yoyo]

I used a cuztomed icon in svg. a white one and a blue one, but when I want to put the white one, it doesn't show. It changes the color to blue :( Why?? I can't have an icon of different color

[gabrielabela]

I used this for different sites and it works, for some reason, the website I am currently working on, the sticky header is not working.

[michaelmclaughlin]

Thanks for this tutorial. Very helpful

[duckapucko]

does a double header affect SEO? or is there a way to block the second headers meta-info so google doesnt crawl double headers?

[projectalpha]

The second header does not disappear after I scroll back up, any advice? I followed every step exactly the same. Thank you!

[ayelendaltosevero]

The header-2 is falling behind the rest of the parts of the website. Any idea why this is happening? I followed the tutorial step by step. Thanks

[sarunsyskode]

Working well but, mobile responsive is not working