Show Hide the Header on Scroll - Free Code - Elementor Wordpress Tutorial

The CSS to add is:
.scrolling-header {
transition: all .5s ease!important;
}

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[arijacko]

Thank you! I got confused with your previous version, but this one was great because you specified that we must change the effects offset ourselves in the CSS snippet to see the change

[vincemahama]

Absolutely zero issues. What a fantastic tutorial. Thanks a million

[Greg.Mika.]

To deliver such level of content with such consistency is just uncanny! Keep on Imran 🤟

[derleuchtturmwarter]

You always have the best topics in elementor and web stuff!

[antoniogarcia]

Thanks Imran. It works great. Added to the toolbox. Have a great rest of your day!!

[Smoker]

Hello Imran,

Thank you for your hard work and such great content.

I have two little issues with this one :

- The header when scrolling up is totally disappearing on Safari, really weird.
- Not working on mobile, it's stay sticky unfortunately...

Thank you for your help on this you're the boss!

[akkouk]

Great and easy solution! Is there a way for this to be enabled only on mobiles? I mean on the desktop the header to stay sticky on scrolling down but on mobile to work like it works on your tutorial?

[markbratton]

And the beauty of it, of course, is that the code always remains here. No worries in it being in your customizer where it may get lost in the shuffle.

[kelvinnga]

can we have different way. the sticky. after the page scroll up.100px than appear the sticky nav ? if the page go top disappear sticky nav ?

[ameti-psa]

Great work.

This is line 17 of your code </script>'; and those symbols after bracket appears under footer, for me worked just removing them but not sure if its good way. Let me know if it is ok.

[BenBaudart]

I can see that like me some people are having issues with the header width when resizing the window horizontally (smaller then wider). The header then stays in its smaller width.
There are 2 fixes, for both you need to update the custom CSS rule you created for the header.

Solution 1: As commented on the previous video by @06smoker, update to :
.scrolling-header {
transition: all .5s ease !important;
width: 100% !important;
}
Solution 2: Mine, change the 'all' to 'top' in the transition as it's interfering with another transition property :
.scrolling-header {
transition: top .5s ease !important;
}
Hope it helps someone else …

[gordonblackler]

Thanks once again for a great tutorial! Could you also find a way of creating a sticky header without using Elementor Pro or the premium version of an add-on plugin. Searching the WP repository, it seems that every plugin with a header / footer builder only has the sticky top as a paid feature. In many cases, I don't need 90% of the widgets they offer - I just want a sticky top. Any suggestions?

[philwatson]

Hi Imran, I've gone through the tutorial and added the code to snippets and the css to the parent container of a header template. For some reason it's not working - the header doesn't work responsively any more, with white gaps either size. Any ideas for a fix for this? Thanks for making such great content, if I can get this to work it's just what I need.

[ektopicbeats]

very nice. I don't know if you can help off the top of your head... You know the loop grid tutorial you did recently with the text path and image mask - the circular one, how do I stop the text path text from lazy loading, It's really bugging me. I've tried fiddling with the phastpress settings and turning off WP meteor - no joy. I am also using your Stop Lazy Load code snippet. Am I missing something? I feel like it's unusable the way it is at the moment. Cheers bud

[duckapucko]

For some reason the offset effect doesn't work for me at all. The JS kicks in immidiately after scrolling 1px... I'm also using a "section" instead of a container for my header - does that matter? It feels like the code should work anyways... Please help me!!

[rogerio]

Obrigado pela aula. Agora, se eu quiser colocar um cabeçalho como esse só que na parte de baixo do site e com algum atraso na exibição tipo: depois de rolar a página 500px, seria do mesmo modo?

[Growdigitalmindset]

hello Imram.I had a problem yesterday with paying for the course with my credit card. Today I try to do it again but it no longer takes the discount coupon.

[dan_kay]

In tablet mode, I can see the edge of the parent container when I scroll down. It doesn't disappear completely. In mobile mode, it stays sticky, no matter what.
Any ideas?

[rafiqraina]

This works good for Pc but on ipad and mobile this has a bug. As when we go the top of the page fast the header vanishes

[cassandrad]

When I scroll all the way back up to the top on Safari, the header completely disappears. Any idea how to resolve this??