How to change menu drawer color?

Retired Boards Appdev Store Design
,

Topic summary

Goal: Change the mobile menu drawer (slide-out navigation) background to transparent or white in a Shopify store.

Context: The OP shared their store URL after requests for access details.

Proposed solutions (CSS overrides):

  • Edit theme.liquid (Online Store > Themes > Edit code > theme.liquid) and add a style block before to override the drawer background, e.g.:
    • div#menu-drawer { background: transparent !important; }
    • (Set to white instead by using background: #fff !important;)
  • Alternatively, edit assets/component-menu-drawer.css and append:
    • .menu-drawer__navigation-container { background: !important; }

Notes:

  • theme.liquid is the main layout file where global CSS can be injected.
  • component-menu-drawer.css targets the drawer’s specific container class.
  • Screenshots were provided to show the visual result of the color change.

Outcome: The OP confirmed satisfaction (“Thank you!!”), indicating the issue is resolved. No further open questions or disagreements were noted.

Summarized with AI on December 21. AI used: gpt-5.
11

Hello @mindstars

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-menu-drawer.css
add this code at the end of the file.

.menu-drawer__navigation-container {
background: cornflowerblue !important;
}

result

17.png
17.png600×832 171 KB

If this was helpful, hit the like button and accept the solution.
Thanks