Please add code here to fix it:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag
Hope my solution will help you resolve the issue.
Best regards,
Noah | PageFly
Topic summary
Goal: change the mobile main menu’s dark background to match the site’s blue/green announcement bar.
Context: The store URL was shared, and the desired color was the announcement bar tone (hex used in replies: #6ECCC8).
Proposed fixes: Multiple replies suggested adding CSS to the theme. Core change was setting .SidebarMenu background to the target color and removing the overlay from pseudo-elements .Drawer__Content:before and .Drawer__Footer:before.
Implementation options:
- Online Store > Themes > Customize > Header > Custom CSS.
- Or Edit code: add CSS in theme.scss.css.
- Some advised placing code in theme.liquid above .
- Optional mobile scoping via media queries (e.g., max-width 1239px or 768px).
Outcome: One media-query-only attempt did not affect the background for the OP. The CSS that set .SidebarMenu { background: #6eccc8 !important; } and hid the before elements resolved it, and the OP confirmed success.
Notes: Screenshots illustrated the before/after appearance. Status: resolved; no further action requested.