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
Topic summary
A user has a transparent header that becomes problematic when the mobile drawer menu opens—text from the drawer shows through the header, making it difficult to read.
Solution provided:
- Add custom CSS through Shopify admin → Online store → Customize → Theme settings → Custom CSS
- The CSS targets mobile screens (max-width: 768px) and applies two changes when the drawer opens:
- Changes header background to black
- Adjusts drawer positioning (top: 98%)
Technical approach:
- Uses CSS
:has()selector to detect when the menu drawer container has the “menu-opening” class - Applies
background: black !importantto force the header color change
The solution includes a screenshot showing the expected result with the black header appearing when the drawer is open. The issue appears unresolved pending confirmation from the original poster.
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:
Please let me know if it works!
Best,
Daisy
1 Like