A Shopify store owner reports a mobile menu bug where the page continues scrolling after opening the dropdown menu, causing freezing and erratic behavior. The issue occurs specifically on iPhone Safari and affects the Trade theme.
Attempted Solutions:
overflow: hidden properties on body/html elementsoverflow: hidden breaks sticky header positioning and suggested using overflow: clip insteadAdditional Issue Identified:
Current Status:
Hello!
I have the following bug in my store mobile view: when i scroll a bit in my homepage and then click on the dropdown menu, when it is open my pages is freezing and performing as a bug. Please suggest me how to fix the code for it. I want to be able to click the menu whenever i am in the pages and when the menu is open to not brake. (check the video with bug here: Unique Download Link | WeTransfer )
Website URL: www.elysiumreads.com
Thank you in advance!
Forgot to mention that this is Trade theme.
Hi @starscream911 ,
Go to Online Store → Themes → Customize → Theme settings → Custom CSS or in Asset/base.css
Add this code at the bottom
body.overflow-hidden {
position: relative !important;
overflow: hidden !important;
width: 100% !important;
}
/* Allow the drawer itself to scroll smoothly */
#menu-drawer {
max-height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
Save and refresh preview
Thanks
Manoj
Please change this code in your theme.liquid file
html:has(.menu-drawer-container.menu-opening),
body:has(.menu-drawer-container.menu-opening) {
overflow: hidden !important;
}
To this
html:has(.menu-drawer-container.menu-opening),
body:has(.menu-drawer-container.menu-opening) {
overflow-x: hidden !important;
}
this doesn’t work sorry. when i click on the menu i can still scroll down…
Hello! I see this code is trying to work properly, but when i try to open the menu from different place in the page the bug is still going on. Can you do it work from wherever in the page i choose to open the menu?
Hi @starscream911,
Please go to Actions > Edit code > layout > theme.liquid file, find ‘html:has(.menu-drawer-container.menu-opening)‘ and remove code here:
It’s exactly opposite – when you add
html:has(.menu-drawer-container.menu-opening),
body:has(.menu-drawer-container.menu-opening) {
overflow: hidden !important;
}
It makes your sticky header no longer sticky and it kinda jumps back to the top of the page, rather then being fixed at the top of the window.
overflow: hidden; does it.
Menu work reasonably well for me when this code is removed.
If you still want to retain it, use
overflow: clip; instead.
People tend to recommend overflow: hidden; without consideration of what it does to position: sticky; children.
What do you exactly suggest me to do? Simple answer please..
first, try removing this code – Namphan marked its location in your HTML. (should be in layouts/theme.liquid)
If something is still wrong, try restoring this code, but instead of overflow: hidden put overflow: clip there.
overflow: clip is a newer feature – works more or less the same as hidden, but does not trash sticky children. and it’s a bit less widely supported.
Ok, this was actually a custom code i firstly added and was working well but since i have more topics in the menu it doesnt’t work properly. Now i deleted it as you said but still when i click on the drawer menu icon i can scroll… please suggest me what to do..
Looks fine on some devices – are you testing on the iPhone Safari and the menu drawer is fixed, but the site is scrolling underneath?
This actually happens on Dawn demo store too https://theme-dawn-demo.myshopify.com, I’d rather ignore it, but let me have another look…
Yes i am browsing it on my iphone Safari, but actually i firstly saw it in the desktop browser after using inspector tool and mobile view option.
Also pretty annoying is I also have the carousell slider arrows visible on scroll to and i see it overflows in the header too when scrolling. But let’s keep the focus now with the menu drawer. I want when i click the icon, scroll to be inactive / not possible.
Suggest me solutions. I’ve recently deleted the code you mention, but let’s dive deeper…
Can you please answer me with alternative?
You sure you put in the right code and at the right place?
as i said, i deleted the mentioned code above. Give me an alternative
/* Mobile dropdown menu /
.mobile-nav {
position: fixed;
top: 0;
right: -100%; / hidden off-screen /
width: 80%;
height: 100%;
background: #fff;
z-index: 9999;
transition: right 0.3s ease;
overflow-y: auto; / allow scrolling inside the menu */
}
/* When menu is open */
.mobile-nav.active {
right: 0;
}
/* Lock body when menu is open */
body.menu-open {
overflow: hidden;
position: fixed;
width: 100%;
}
where to put this? will this override already existing code? please be more specific
Hi @starscream911,
Did you find the code I showed you?
Just find it and remove it, everything will work fine. 
Add this to your theme.css (or base.css depending on your theme)