Sticky Header Hide and Show on Scroll - Elementor Wordpress Tutorial - Sticky Top Header Template

Code for Code Snippets:

CSS Code for Transition:
.scrolling-header {
transition: all .5s ease!important;
}

Sticky Header Hide and Show on Scroll - Elementor Wordpress Tutorial - Sticky Top Header Template

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

Hire us to work on your Website!

[daniel.trapanese]

Great Stuff Imram. Quick, simple, very useful, and no fillers. Love your content. Keep it coming mate!

[markbratton]

Thanks! I really dig this plugin. It has opened up my whole world in Elementor. Great stuff as usual, Imran!🙂

[oscarmartinlive]

I had to subscribe to your channel and turn on notifications right after watching this video. So powerful and helpful. Thank you.

[paulburgess]

One by one I'm adding these little gems to my site, these snippets are really eay to apply. Never thought I'd be using CSS but you explain how things work so well 👍

[pezreloaded]

Thanks for another awesome helpful vid. Code Snippets quickly becoming my new BFF.

[webtappers]

Thanks for sharing these very very useful tips & tricks to make UX better!

[bySterling]

Awesome and great touch w the transition

[SquirrelRock]

You do Such a wonderful job of explaining these things. Thanks for your great insights and fabulous tips!

[erickson.scarlet]

You've saved me again bro. You are a legend. Getting that notification bell turned on

[PabloAlbaBur]

Thanks, a success and easy to implement

[toineenzo]

Awesome!! I really need this.
Could you maybe make a tutorial that makes the logo smaller when you scrolldown? Like the default effect that is in Divi theme.

[christhjian]

This works great. But what if I would like it to hide after, let's say 4 scrolls? I could not figure out how to do it. Does anyone have ideas?

[mandalsubha]

A very very useful code snippet indeed. But my transparent header is disappearing when I scroll to the top of the website. Is there a fix?

[adamhharbin]

This works great everywhere except safari. On Safari the header hides as default when the user scrolls back to the top of page. It appears a bit glitchy.

[prerakmehta]

Hey Iman, love your videos. I have a question, as a freelancer is it my responsibility to manage the order and inventory of e-commerce website that I build for my clients? If no then can I charge a monthly recurring service charge for maintaining orders, generating invoices etc.? Would love if you can over this topic in a separate video
Also planning to purchase your course. Super excited to start my web design agency business!!!

[douglascapron]

Excellent. Could this also be achieved for the footer, revealing it on scroll?

[trinib]

nice work . I FOUND ANOTHER EASY SOLUTION !! instead of using snippet plugin and header template which i cannot get in free Elementor, so using the regular menu header, we can create a JS file with script, custom CSS and then implement HTML script tag in header php which will achieve to same results even with animations like fade in or slide in from the top or the left.

[michajagosz]

Thank you for sharing! It's great, however I noticed one issue on mobile browsers (safari and firefox on iOS). I use this solution for mobile menu sticked to the bottom edge. Once I scroll up it shows up, but one I hit the top of the page it disappears. Do you have any fix for that? Maybe it is caused by that browser effect of dragging the screen a bit above the page (to refresh) which actually make the site goes a little bit down (like scroll) when I release a finger.

[mazmahjoobi]

Thank you! I'm having a problem when resizing the browser width. When I load the site at let's say 600px width and then resize the window too let's say 1200px the header stays at 600px and is just centered in the page and won't resize with the rest of the page. Is this just me or does this happen for everyone?

[notapplicable]

Mine automatically does this, and I can't take it off as I want the menu to just stay?