how to make menu have a transparent background

Store Design

Topic summary

A user seeks to make their Shopify store’s menu background transparent and remove the black overlay fade.

A solution is provided using custom CSS code:

  • Add CSS to base.css file to make the menu drawer transparent
  • Additional CSS removes the dark background overlay

Follow-up issues raised:

  • The fade effect extends too far over product images; user asks how to shorten it
  • Request to apply transparency only on desktop view, not mobile (currently affects both)
  • Another user successfully implemented the solution but now has a white menu header and needs help changing its color

The discussion remains ongoing with unresolved questions about fine-tuning the implementation across different devices and adjusting additional styling elements.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
2

Hi @christian_russo

Use this CSS to make the menu drawer transparent

  1. From your Shopify admin dashboard
  2. Navigate to Online stores > Themes > Select the main theme
  3. Click on Actions > Edit code
  4. From the code editor, search for the base.css file
  5. Paste this code at the bottom of the file
.menu-drawer {
    background-color: transparent !important;
}

Use this CSS to remove the background dark overlay

.header__icon--menu[aria-expanded="true"]::before {
    background: rgba(var(--color-foreground), 0.0) !important;
}

Cheers!