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

Store Design
, , , , , ,

Topic summary

A user wanted to make their header transparent or remove its fill color when clicking the drawer menu button on their homepage, similar to the Vivienne Westwood website effect. They were using the Origin theme.

Solutions Provided:

Two working CSS solutions were offered:

  1. Custom CSS approach: Add code to the Theme settings Custom CSS section targeting .overflow-hidden-desktop .header-wrapper with semi-transparent background

  2. Base.css modification: Edit the base.css file directly with more comprehensive styling including:

    • Semi-transparent header background
    • Menu drawer positioning adjustments
    • Navigation padding modifications
    • Close icon z-index fixes

Resolution: The user confirmed one of the solutions worked perfectly. Both approaches use rgba(var(--color-foreground), .5) to achieve the semi-transparent header effect when the drawer menu is open.

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

How can I remove the header fill color or make it transparent when I click the drawer menu button on my homepage?# I’ve included a photo example of a website that has achieved the effect I want to achieve (vivienne westwood) as well as a photo of what my desktop site looks like currently when I click the drawer menu button.# Theme: Origin# URL: billon.maison

Screenshot 2025-01-15 at 12.54.59 AM.png
Screenshot 2025-01-15 at 12.54.59 AM.png2994×1854 877 KB

Screenshot 2025-01-15 at 12.55.45 AM.png
Screenshot 2025-01-15 at 12.55.45 AM.png2998×1848 478 KB

2

Please share your store url for a better understanding.

3

Hi @MaisonBillonDon ,

I am from Mageplaza - Shopify solution expert.

Here is the solution to achieve your requirement:

  1. Go to your Shopify admin panel.

2.Navigate to Online Store > Themes.

3.Click Customize on your current theme.

4.Look for a “Custom CSS” section under the Theme settings and add CS rule:

.overflow-hidden-desktop .header-wrapper{
    background: rgba(var(--color-foreground), .5);
}

Here is the result:

mageplazacs_0-1737355466603.png
mageplazacs_0-1737355466603.png1920×935 302 KB

Please let me know if you need any further instructions.

Best regards

4

Hello @MaisonBillonDon ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.overflow-hidden-desktop .header-wrapper, .overflow-hidden-tablet .header-wrapper {
    background: rgba(var(--color-foreground),.5) !important;
   }
.menu-drawer {
    top: 0 !important;
}
.menu-drawer__navigation {
    padding: 3rem 0;
    padding-top: 10rem !important;
}
svg.icon.icon-close {
    position: absolute;
    z-index: 111 !important;
}

ZestardTech_0-1737356745921.png
ZestardTech_0-1737356745921.png1828×512 83.3 KB

Let me know if you need further assistance!

5

This worked perfectly thank you !