Overlay issues - scrolling background in burger menu and drawer cart

Technical Q&A
, ,
1

Hey everyone,

I’m running into a mobile only scroll issue on my Shopify store: on a real phone, when an overlay is open (burger menu or slide-out cart), the background page can still scroll instead of being locked.

In Chrome DevTools (F12) device emulation it works as expected, so the problem seems specific to actual mobile browsers/devices.

I´ve tried a lot already, but i´ve never been able to fix this.

Store URL: www.motifartwork.com
(If you test the cart, please decline cookies first.)

Any suggestions or pointers would be really appreciated. Thanks!

4

Please try to add this code to theme.liquid file before and check if it solve the issue

<style>
htm:has(.menu-open), body:has(.menu-open) { overflow: hidden !important; }
<style>
7

Hey there, thanks for helping! I’ve tried it, but it unfortunatly didn’t fix it

9

You have an app for Cart Drawer which set style property on <html> and <body>:

Screenshot 2026-01-21 at 12.43.57 PM
Screenshot 2026-01-21 at 12.43.57 PM886×217 55.8 KB

This is a powerful way to apply element styles and that’s why the class-based rule which theme has does not work:

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

On top of that, you have a bunch of rules like this from Foxify Custom CSS:

@media (max-width: 749px) { 
  html.x-page, 
  html.x-page body {
     overflow-x: clip !important;
     overflow-y: visible !important;
  }
  html.x-page:has(.x-main-product), 
  html.x-page body:has(.x-main-product) {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
}

You must also account for overflow specifics:

  • Setting overflow to visible in one direction (i.e., overflow-x or overflow-y) when it isn’t set to visible or clip in the other direction results in the visible value behaving as auto.
  • Setting overflow to clip in one direction when it isn’t set to visible or clip in the other direction results in the clip value behaving as hidden.

Ideally you need to clean up these CSS rules.

Or you may try to override all these by adding code like this to your “theme settings”-> “Custom CSS”:

html:has(body[class*="overflow-hidden"]),
html body[class*="overflow-hidden"] {
  overflow-x: clip !important;
  overflow-y: clip !important;
}
10

my bad, here is the correct code. Make sure you have added it before </body>

<style>
html:has(.menu-open), body:has(.menu-open) { overflow: hidden !important; }
</style>