how to make menu have a transparent background

[christian_russo]

hi! 

is it possible to make the menu background transparent and get rid of the black fade?

www.gallerychristian.com

password: Christianshop123

thanks!

[collinsmbaka · Accepted solution]

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!

[christian_russo]

thank you!! is there also a way to make this fade shorter so it doesn't goes over the pictures?

[christian_russo]

is it also possible to have this on desktop but not on mobile? because now it's like this: 

thanks!

[virregouda]

Hello! I used this and it works, but now my menu header is still white, could you help me change color of that as well?