How to remove header fill when I click the drawer menu button on homepage

[MaisonBillonDon]

How can I remove the color fill on the header when I click the drawer menu button on homepage? I've included an example photo of a website that has achieved what I'm looking to achieve as well as a photo of what my website currently looks like when I press the menu button with the color fill that I'd like to remove in a red box. 

Theme: Origin

URL: billon.maison

[TheScriptFlow_]

Hey @MaisonBillonDon,

This is Qasim a Sr. Shopify Developer and official Shopify Partner. If you want to remove the backgorund color on the header while click on menu drawers then please follow these steps.

1. Go to theme Customization.
2. Click on there dots from the theme Customization.
3. Now the drop down will open just click on "Edit Code".
4. In the Edit code search for "base.css".
5. Go to end of base.css file and paste the following code.

.overflow-hidden-desktop .header-wrapper, .overflow-hidden-tablet .header-wrapper{
background: rgba(255,255,255, 0.5);
}

[MaisonBillonDon]

Unfortunately, this solution did not change anything. 

[MaisonBillonDon]

Do you have an alternative suggestion on a solution to this problem?

[topnewyork]

Hi @MaisonBillonDon 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.menu-drawer__menu-item {
    color: black;
}
.menu-drawer__navigation-container {
    background-color: white;
}
#Details-menu-drawer-container[open] ~ .header {
  display: none;
}
</style>

 If you find my advice helpful please remember to LIKE and accept as SOLUTION.
Thanks!

[MaisonBillonDon]

When I use this code, the drawer menu now changes to white but the header still has a color fill on it and I want it to have no color fill. I've included a photo.

[MaisonBillonDon]

Please see my first response. Do you have any other coding suggestions to achieve the effect that I'm looking for?

[websensepro]

Hi @MaisonBillonDon 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.overflow-hidden-desktop .header-wrapper, .overflow-hidden-tablet .header-wrapper {
    background: none !important !important;
}
.header__icon--menu span svg.icon.icon-close {
    z-index: 12 !important;
}
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle svg.icon.icon-search {
    z-index: 44444 !important;
}

.js details[open].menu-opening>.menu-drawer, details[open].menu-opening>.menu-drawer__submenu {
    z-index: 6 !important;
    height: 100vh !important;
    margin-top: -133px !important;
    padding-top: 60px !important;
}

.header__icon--menu[aria-expanded="true"]::before {
    margin-top: -133px !important;
    height: 100vh !important !important;
}

 Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales! 🚀 (https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!

[MaisonBillonDon]

This did not work unfortunately. I tried to paste the code first in base.css and then theme.css. I've attached a photo of the result. 

[MaisonBillonDon]

Hello, please see my first response. I've included a photo of what happens when I use the code you suggested. 

[websensepro]

Apply the code I gave you, then I'll see your issue.

[MaisonBillonDon]

This is a picture of what happens when I apply the code you gave me.