A store owner is experiencing mobile menu display issues where the menu doesn’t occupy the desired screen dimensions (100% height and 50% width) and the header/banner appears overlapping the menu cart.
Proposed Solutions:
header.liquid targeting #menu-drawer with height: 50vh !importantbase.css file@media(max-width: 767px) { #menu-drawer { width: 60% !important; }}Current Status:
The width issue appears resolved, but the header still overlaps the menu cart. The problem remains partially unresolved, with the overlapping header requiring additional CSS adjustments.
Hello,
I would like your help with an issue that is bothering us
We have made our online store exactly how we wanted it to look,
The main problem we want to solve now is that,
When I’m on mobile, and open the menu, the banner continues to appear,
I would like the menu to appear 100% of the height and 50% of the width of the screen, above all,
Any solutions?
Go customize > edited code > header.liquid and past this code
div#menu-drawer {
height: 50vh !important;
}
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
div#menu-drawer {
width: 60% !important;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
