NO, this is not to be fixed with CSS.
Follow this recommendation:
Topic summary
Shopify drawer menu overlay turns the screen gray and doesn’t open. Root cause was an invalid/missing tag in theme.liquid; restoring the header and ensuring fixed the basic opening behavior.
A warning message appeared after the fix; it’s stated as safe to ignore. Animation looks odd under RTL.
Orientation request: keep buttons on the left, have the drawer slide in from the right. Implemented via Custom CSS:
- .menu-drawer { transform: translate(100%); }
Text centering added via CSS: - .list-menu__item { justify-content: center; }
- .menu-drawer__account { justify-content: center; width: 100%; }
Disagreement:
- One approach recommends CSS-only fixes (visibility/position rules).
- Another stresses that CSS won’t resolve core issues if the HTML tag and the “js” class are missing, which affect built‑in drawer animations.
Current status: Menu opens and right-side behavior works; desktop animation still not playing. The “js”/HTML fix reportedly didn’t change desktop animation. Further clarification and testing are pending; no final resolution yet. Images and a screen recording were shared to illustrate errors/animation.
1 Like