why can't I scroll on site after opening menu on mobile?

Store Design
, , , ,

Topic summary

A mobile menu issue prevents scrolling after opening, requiring a page refresh to continue browsing.

Identified Causes:

  • JavaScript malfunction with the close drawer button
  • Potential CSS conflict causing overflow: hidden to persist on the body element
  • Invalid HTML structure in the mobile menu drawer with missing required elements

Proposed Solutions:

  • Add body { overflow: auto !important; } to CSS to force scrolling
  • Check browser console for JavaScript errors that might prevent proper menu closure
  • Restore proper HTML structure by copying code from a clean, unmodified theme version

Status: The issue appears to stem from modified theme files. One responder suggests hiring a Shopify developer if unfamiliar with coding, while another provides specific HTML structure comparisons showing the invalid markup.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

why can’t I scroll on site after opening menu on mobile?

-After opening mobile menu the site isn’t working anymore, I always need to refresh tho whole site in order to continue. Does someone know how to fix this. (problem on mobile version only)

1 Like
2

Hey @michelle012

After having a look at your website, it looks like there’s some Javascript issue on the function of the close drawer button and since it’s not a CSS issue so I can’t directly provide you a code like that and it will require some changes in your theme files. If you’re not familiar with coding then I would highly recommend you to hire a Shopify developer who can help you out with that. Feel free to connect with me if you want me to help you out and I would be more than happy to give you a helping hand.

Moeed_0-1742462315579.png
Moeed_0-1742462315579.png1920×650 109 KB

Best Regards,

Moeed

3

Hi @michelle012

I think the reasons maybe due to a CSS or JavaScript conflict in your theme. So, I’d recommend few things to check:

  • Overflow Hidden Issue – Some themes add overflow: hidden to the body when the mobile menu is opened but fail to remove it when closed. Try adding this to your CSS: body { overflow: auto !important; }
  • Check if there’s an error in your browser’s developer console (Inspect Element > Console). A broken script might be preventing the menu from closing properly.
4

You have invalid HTML in your mobile menu drawer and some required elements are missing. Compare 2 screenshots –

Theme demo store, proper structure:

Screenshot 2025-03-20 at 11.49.23 PM.png
Screenshot 2025-03-20 at 11.49.23 PM.png1042×144 30.8 KB

Your store, invalid structure:

Screenshot 2025-03-20 at 11.49.39 PM.png
Screenshot 2025-03-20 at 11.49.39 PM.png1042×144 26.9 KB

I am not sure how it happened and why these theme files were modified…

One solution is to get a clean unmodified copy of the theme (from the theme store, or maybe you have kept an older copy in your shop) and copy this code over.