When drawer open make header black

Store Design
, , , , , , , ,
1

Hi,

I have my header as transparent. When the drawer is open I need the header to turn black or words show behind it.

my site is https://eftfkw-vc.myshopify.com

AC00CE10-B7DC-41FE-BA61-4BADA039F49F.png
AC00CE10-B7DC-41FE-BA61-4BADA039F49F.png1170×2532 155 KB

2

Hi @Luxurymrkt

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (max-width: 768px){
sticky-header.header-wrapper:has(details#Details-menu-drawer-container.menu-drawer-container.menu-opening) header.header {
    background: black !important;
}
sticky-header.header-wrapper:has(details#Details-menu-drawer-container.menu-drawer-container.menu-opening) div#menu-drawer {
    top: 98% !important;
}
}

Here is the result:

DaisyVo_0-1736817708137.png
DaisyVo_0-1736817708137.png520×723 12.4 KB

Please let me know if it works!

Best,

Daisy