A Shopify store owner encountered an issue where the mobile menu wasn’t displaying content—only darkening the screen—while the desktop version worked correctly. Removing custom code from theme.liquid didn’t resolve the problem.
Solution provided:
base.css file.menu-opening .menu-drawer {
visibility: visible !important;
left: 100% !important;
width: 100% !important;
}
Outcome: The CSS fix successfully resolved the mobile menu display issue. The problem was related to the menu drawer’s visibility and positioning properties not being properly applied on mobile devices.
Hi guys! Something went wrong with my mobile menu. It does’t show anything - just makes the screen darker. It works fine in desktop. I have tried to remove all custom code before head in theme.liquify but nothing happens. How do i fix this without having to update my theme?
stor url: https://hevoeyewear.com
Hello @melvin_hevo ,
Follow these steps:
Go to Online Store → Theme → Edit code
Open your base.css file and paste the following code at the bottom:
.menu-opening .menu-drawer {
visibility: visible !important;
left: 100% !important;
width: 100% !important;
}
Regards
Guleria
Hello @melvin_hevo
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.menu-opening .menu-drawer {
visibility: visible !important;
left: 100% !important;
width: 100% !important;
}
Thank you so much Guleria!! 
Life saver!! 
