Hide menu and header when scrolling on mobile devices

Hi,
My header/menu is taking up most of the space of the screen on mobile devices which makes it almost impossible to read anything on the screen, let alone to enter payment details in my store.

How do I hide the menu/header when scrolling down? I’d like for it to only be at the very top of the page, so when you start to scroll further down, you can no longer see it. How do I do this? I’ve been struggling for days with this but cannot find anything that helps. I’ve tried CSS codes from other support topics, but nothing works for what I want to achieve.

I hope you can help.

Sincerely,

Hello there,

If I got it correctly, you’d add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 992px) {
      .has-hero .site-header {
        position: relative;
      }
      .header-navigation.header-floating.floating {
        position: static;
      }
      #header-floating-helper {
        display: none !important;
      }
    }

Regards,
Kharis

Fantastic! Thank you. It worked!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis