When mobile visitors tap your store's hamburger menu icon and nothing happens, mobile navigation drops to zero and bounce rates skyrocket. In over 80% of store audits, this issue is caused by z-index stacking overlay conflicts, unclosed Liquid tags, or broken JavaScript event handlers. Here are the 5 exact code solutions:
1. Fix Z-Index Stacking Context in header.liquid
Third-party review widgets or sticky banner bars often place transparent overlays with z-index: 999999 over the header, intercepting touch events. Open assets/base.css or sections/header.liquid and elevate your header drawer container:
.header-wrapper, .menu-drawer-container {
position: relative;
z-index: 1000000 !important;
pointer-events: auto !important;
}
2. Inspect JavaScript Console for Fatal Script Errors
If an uninstalled third-party app threw a fatal JavaScript error in theme.liquid, modern browsers halt subsequent scripts, preventing details-modal.js from toggling the mobile menu open attribute.
3. Ensure details-modal.js is Loaded with Defer
Confirm that the core Dawn component script is included inside layout/theme.liquid before the closing </body> tag.
4. Remove Conflicting Sticky Header CSS Animations
Custom CSS transitions that apply overflow: hidden to body or html without toggling it back on drawer close can permanently lock the screen.
5. Test Touch Event Listeners on Real Mobile Devices
Simulating mobile view on desktop Chrome does not always replicate iOS Safari touch event bubbling. Test on physical iOS and Android hardware.
If your theme code is locked or custom CSS is conflicting, hire Bilal (Goofy Developer) to debug and fix your theme within 24 hours.