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);
}

[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

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

[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]

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]

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]

Unfortunately, this solution did not change anything.

[MaisonBillonDon]

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

[MaisonBillonDon]

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

[MaisonBillonDon]

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

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