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;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
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 Elementor tu...
WordPress Basic Course:
• Playlist
#customwp
#elementor pro

[@mohamedniang5818]

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

[@customwp]

Your Welcome 🤗

[@JohnsonAugustine]

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

[@customwp]

your welcome 🤗

[@jl1090]

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

[@customwp]

Your Welcome

[@banomobile5743]

Man you are a life saver
Worked flawlessly

[@customwp]

Thank You

[@saulomarques6449]

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

[@customwp]

Your welcome 🙏

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

[@customwp]

Your welcome

[@michaelmclaughlin1563]

Thanks for this tutorial. Very helpful

[@customwp]

Your Welcome

[@albinustejos_com]

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

[@customwp]

Your welcome

[@slidesheetss]

thanks man, you helping me solved with my problem

[@customwp]

Your welcome 🙏

[@hoangmaiin5366]

NICE JOB !!!! I LOVE YOU!

[@customwp]

Your Welcome

[@antonbroman200]

Thanks, you're the man

[@customwp]

Your welcome 🤗

[@staywithoff]

Thank you so much ^^

[@customwp]

Your Welcome

[@fitforeverfitness]

Thank you so much!!

[@customwp]

your welcome 😊

[@muhapriansyah2011]

thanks for the tutorial

[@customwp]

Your welcome 🤗

[@AndrewHarris-zy3lg]

tnku very much it worked

[@customwp]

Your welcome

[@ElementorShopifyDesigner]

That's Great

[@user-ff8zz]

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

[@customwp]

Your welcome 🤗

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

[@customwp]

Thank you 😊

[@gotox353]

Thank you !!!!

[@customwp]

Your Welcome 🤗

[@manuelvortex5267]

Desde perú
muchas gracias!

[@customwp]

Your Welcome☺

[@GoPqRe]

Thank you, bro

[@customwp]

your welcome🙏

[@muheka20]

thank u so much

[@customwp]

Your Welcome

[@gabrielabela9211]

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.

[@NCSNoLimitSounds]

Thanks brother

[@customwp]

your welcome 🤗

[@zeeshanmehboob329]

Amazing 😍

[@customwp]

Thank you 😊

[@zeeshanmehboob329]

@@customwp welcome. And I also subscribed your Chennal. Carry on to making amazing videos like this. Thanks

[@joneseo2185]

Nice : )

[@customwp]

Thank You

[@udoyhalderakash7206]

brother how t to add fade in animation please reaply

[@jonsotirakopulos4390]

mine has a little black gap on the top. Part of the black header is somehow showing thorugh above the text.

[@cariwambolt419]

Adjust the CSS on line 4

[@projectalpha2673]

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

[@customwp]

follow again if still not work then content with me
Email: [e-mail]

[@duckapucko6395]

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

[@customwp]

No

[@yoyo12314]

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

[@customwp]

Because elementor default color is blue You can change color of SVG icon in elementor

[@muhammadsaadmansoor7777]

i like your music. whats it alled

[@haseebkhan-gp9ie]

Nice

[@customwp]

Thank 😊

[@sarunsyskode]

Working well but, mobile responsive is not working

[@saoworks]

Hello, greetings from Turkey, first of all, thank you for this informative content, I applied in the same way, no problem, only the header is double in the mobile version, how can we solve this on mobile?
You need urgent help on this matter :) I would appreciate it if you could help :) translation google translate,

[@customwp]

[e-mail]

[@ayelendaltosevero2876]

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

[@customwp]

Thank you for your comment, I think you made a mistake, please follow up again, if still does not work then contact me.
Email: [e-mail]

[@ayelendaltosevero2876]

@@customwp Thanks for the reply! I alread sent you an email (I forgot to add the subject tho, sorry) :D

[@ridaislam2509]

Sir kindly plz tell me how we can setting the custom post types ?

[@customwp]

You can use CPTUI or plugin to create custom post

[@patricksuchy3212]

Anyway you could also make it mobile friendly?

[@customwp]

yes you can contact me
Email: [e-mail]

[@user-wk2sx4td3t]

can you please actually make a tutorial on the custom css that paste in customization, what was that, how do we write that on our own.

[@customwp]

Sure i will make soon

[@user-wk2sx4td3t]

@@customwpthanks, if you are a developer please make a comperhensive video on wordpress and websites development

[@customwp]

@@user-wk2sx4td3t Yeah, I am Planning to make a tutorial about creating a custom website in WordPress using Elementor page builder.

[@DQ-Lifestyle]

does it require elementor pro?

[@customwp]

yes

[@andazebayan2022]

bro not working for big screens, its overlappiing on big screen

[@customwp]

Please Follow tutorial carefully again, if still not working then contact with me
Email: [e-mail]

[@andazebayan2022]

@@customwp oky thanks

[@kdmshopping8469]

not working

[@customwp]

please follow again if not work then contact with me maybe i can help you
Email: [e-mail]

[@mr_oizofpv4432]

terrible solution for SEO creating double header.

[@DannyBokma]

Are you sure you put in enough please subscribe animations? I think you can put 3 more in there.

[@kungfury6410]

This didn't work. Don't waste your time.

[@customwp]

Its work please follow again and if again face any problem theb contact with me
Email: [e-mail]

[@Kerbusar]

I tried to apply what you showed in the header from transparent to color. It worked after I added a command to the css and it went like this:
/* 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:0px /* i add this */
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}
/* End Of S

[@customwp]

Please Try Again If still Facing any issue then contact with me
Email: [e-mail]