Hoping someone can help me!
When I click on the hamburger menu on mobile it shows up behind my main content.
Any suggestions?
Topic summary
A mobile hamburger menu is displaying behind the main page content instead of overlaying it properly.
Proposed Solutions:
-
CSS z-index fix: Add custom CSS code to the theme.liquid file before the closing
</body>tag to adjust layer stacking order. A code snippet was provided but appears corrupted in the thread. -
Systematic troubleshooting steps:
- Test with a fresh theme installation to isolate the issue
- Clear device cache and test on different devices
- Undo recent theme modifications or app installations
- If the problem persists across clean installations and devices, gather detailed device information (model, OS version, browser details) and report directly to Shopify support
The discussion remains open with no confirmed resolution yet. The issue appears to be a z-index/CSS layering problem common in Shopify theme customizations.
Hi @MarkG3
You can try this code by following these steps:
Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag
Hope this answer helps.
Best regards,
Victor | PageFly
Test if the issue is present even in a new theme by install a fresh copy of the theme.
Clear the cache for the device being used and check again.
Try a different device to rule out device problems.
If you recently modified the theme or installed an app that affects themes undo that change and retest.
If it is a specific device and issue is present on even a new theme then gather the information of the device model, device operating system version, and device browser name and device browser version being used.
Then report it directly to shopify support