Elementor Sticky Headers: Hide Header on Scroll Down, Show On Scroll Up

I like your videos, they are well presented and the results work, all helps the community to grow. Thank you
I do have a challenge that according to Elementor Pro support can't be done. I setup a form to capture data for marketing and after clicking the submit button a PDF with information is shown. I want the PDF to display on a new tab and put some html along with the PDF URL but it doesn't work as standard. Any ideas would be great, the client is happy as it is and this is purely for my satisfaction 😀

I am running into the issue where when I scroll back up, the header only comes back halfway. Do you know why this is happening?

Thank you so much!!!

for me its really laggy and not really fluent, Kinda seems buggy but I have follewed each step exactly

This is the best tutorial!!!

The only thing is that when scrolling back up, the menu doesn't come back as it was, it is kind of higher and does hide a part of it... Do you understand why ?

Thank you for this! I got it working but when I scroll back up the whole header doesn't appear. It cuts of the top of it and adds white space between the header and content of page. Any fix to this? Thanks so much!

Hello. Great tutorial! Explanations are very clear and I appreciate you're doing tutorials with UI&UX in mind.

Short question:

What can I do if on desktopI have a little section of 30px height above the sticky header (contact bar)?
Can the js be separated for desktop and mobile? So on desktop I put a distance of 30px from top for initial state?
The mobile js would be 0px distance for the top for initial state of the header.

Thanks a lot!

Any clue on how it'd be set under the other one container?

As I have the container with logo, hamburger menu and account icon and then another one purely with search-bar

My idea is to have the search-bar appear only when scrolling upwards and I don't like it taking place of the first container when scrolled upwars. It goes to the top, instead of where it's initially put in header template.

- Appreciate your time & skill, Jeffrey!

Any idea why I wouldn't have the sticky option in motion effects? I made sure to update to the latest version of Elementor. I do use the free version, but I had thought it was included in the free version. Thanks

Well explained and exactly what i needed. Thanks!

Thank you

Great explanation! Pure javascript too! 🙌

Does not work for me. The header breaks when scroll up.

Hi Jeffrey, could it be that this script (btw. Imran has a similar one) does not work in Safari? (it works fine in Chrome) When I use these scripts the header disappears as desired on scrolling down and comes back during scrolling up. But as soon as you reach the top top of the site the header jumps up to nowhere and leaves a blank space of the size of the header hight. The only way to get the header back is to reload the whole page. What do you think?

hey Jeffrey, this works perfectly when scrolling up... but when I'm scrolling down, the header disappears immediately when I scroll down for 1 pixel, even tough I set the "effects offset" on 300px. Is there perhaps something that we can overrule in the code? Any other users who had the same problem?

Thank you for code , but not work with scroll snap elementor.

When I load the website, the header hides immediately when i'm on the top of the page. Is there a way I can leave it there and have it show up when i scroll up? (essentially the same like you did but keeping the header showing when at top of page, first load)

try to not make it with elementor PRO pls, im not a pro user

This works on my homepage, but for some reason, not any other page with the header applied. It's also not working on Safari at all. Any ideas?

Gracias parcero - great video. Fron Colombia bro 👑👑🚀🚀

Great tutorial! I am new to code and I made a sticky header that changes when you scroll. I am experiencing 1 problem though. Containers I have that are also sticky completely change to white (the color of the header background on scroll) and do not show any contents. I'm guessing because the code changes all sticky elements. Is there a way to avoid this?

Thank you so much.its done my work!

did nothing for me

try changing size of your browser window - to narrow than back to wider - it all breaks appart

Great one! But sadly does not work well on iOS devices. The menu disappears when scrolled up when you are on the top of the page.

Great tutorial, but I'm having some trouble with the shrinking header (I followed exactly the process you taught in the other video). Once I activated the script, the whole shrunk stuff stopped working on the live page, so the header disappeared and appeared as it should, but the background and shrunken parts didn't activate. (it works perfectly on the elementor tab, but not on the live page). Does anyone have any thoughts on why this is happening? Thanks

Is it possible to have this effect just for the desktop version, but not for the tablet or phone version?

Worked like a charm!!

it worked properly, thanks

Hey, Thanks for the great video! I have one question... I've done all the step and the header hides on scrolling down and reappears when scrolling up, BUT when I'm at the top of my page, it disappears... because there is some kind of 'bounce' at the top when you scrol it hides again. It's really annoying and I can't get it fixed! what am I doing wrong? :(

Thank you very much for the gift of this tutorial and code, it works extremely well. In my browser though, when I scroll to the bottom of the page, the page goes past the actual bottom of the page and automatically 'bounces' up when I take my finger off. When it does, the menu reappears of course. Is there any way to prevent this happening? I think Mobiux posted a mod to the code which fixes a similar issue when scrolling to the top if that's any help.

Can you please make a Tutorial on how to change menu appearance based on section background that is it scrolled to.

Hello Jeffrey thank you soo much for the tutorial, I followed it but my header does not appear back in the desktop - for mobile, it is working fine

I found problem how change background of shrinker menu, but does not make affect to color of fonts in css, even with important code. For example i want main header transparent with white menu fonts and white logo (that is ok and i can do it), but i do not know how to do shrinker (sticky header) has full background white color with black font menu and black logo. Can give me some advice. Thank you.

This tutorial is only for Elementor pro version. i realise that half way in the video. But i found a plugin that is easy to use (sticky header effects for elementor). Good luck with your website.

Hello, than you for your tutorial. Can you help me how i can change background color of sticky menu, if i want it is different, than top fixed menu?

Thank you for you work. It worked very well !

But there is an inconvenient I can't solve myself. On the first scrolling down the header is hiding... but instantly. Without any effect. But it's strange because after that it's working well and smooth. Do you know why ?

I have a problem with the mobile it does not show when I reload the page only when I go down and up again.

Thanks for this! I'm using it on a site I'll be launching this week. The hide header works real smooth on desktop and mobile. But, I ran into a problem when scrolling on my tablet (iPad Mini). Whenever I scroll back to the top of a page the header doesn't stick, instead it hides. Is there any way to fix this? Thanks again!

I can't make it work correctly :(

Great tutorial, just subscribed! Is there a way to adapt this to a header which is stuck to bottom of page instead of top?

Thank you so much for this!

has there already been a fix for the problem that makes the header disappear when scrolling back to the top of a mobile device?

You are the best! Simple indeed Thank you so much

Thank you! Great stuff

Theres an error, when I go all the way up on mobile, the header disaper and not stay in thei place

what about change color of menu font, instead of its size Lytbox ?

Jeffrey, a nice tutorial, as always. I am using Elementor free version and do not get "add code" in Dashboard under "Elementor - Custome Code". What could be the reason? Thanks in advance.

Great video keep it up