How to fix scroll bug in header on mobile

Store Design
, , , , , , , , , , , ,

Topic summary

A mobile-specific scrolling issue was affecting a Shopify store’s header. When the header menu opened on actual mobile devices, users could scroll through the entire store content behind it, though the bug didn’t appear when testing with browser developer tools (F12) on desktop.

Solution provided:

  • The problem originated from CSS in the base.css file
  • Changed body.hide-scroll { overflow-y: hidden !important; } to body.hide-scroll { overflow: hidden !important; }
  • This modification prevents both vertical and horizontal scrolling when the mobile header is open

Status: Resolved - the CSS adjustment successfully fixed the scrolling behavior on mobile devices.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, when I open the header on mobile and start “scrolling,” it scrolls all the way across the store.

How can I fix this? I want the header to be fixed in place and not scroll, without any bugs.

Here’s my store URL: https://1049xn-ya.myshopify.com/

Also, when I check it using F12 on a computer, it doesn’t bug, but when I view it on an actual mobile device, it doesn’t work.

So I only need this for mobile

Thank you,
Tim

2

Hi @CreatorTim ,

I am from Mageplaza - Shopify solution expert.

fter reviewing your store, I found that the issue is likely caused by the CSS in base.css:

body.hide-scroll {
    overflow-y: hidden !important;
}

You can modify it to:

body.hide-scroll {
    overflow: hidden !important;
}

Please let me know if it works as expected!

Best regards

1 Like
3

Hey, I think it works! Thank you

1 Like