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.
10

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

div#menu-drawer { background: transparent !important; }

niraj_patel_0-1724830926287.png
niraj_patel_0-1724830926287.png319×465 102 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.