Change header color when i open the drawer menu

Store Design
,

Topic summary

Header should change from transparent to white when the menu opens in a Shopify theme. Store URL provided for context.

  • Solution: Add a CSS rule in Assets/base.css: body:has(.menu-open) header { background-color: #fff; }.
  • Steps (Shopify admin): Online Store > Themes > Actions > Edit code > Assets > base.css > paste rule at end > Save, then preview.
  • Technical note: :has(…) is a CSS selector that applies the style to the header when the page contains an element with class .menu-open, turning the header background white (#fff).
  • Outcome: The change worked as intended for the requester. No further issues or alternatives discussed. Thread resolved.
Summarized with AI on December 30. AI used: gpt-5.
1

So, my header is transparent when the menu is not opened, and i want it to look white when i open it.

I’ve searched around already and found a similar post but the solution wasn’t posted there.

1 Like
2

Hi @someone1921

Would you mind to share your store URL? Thanks!

3

Sure thing!

https://coreclothing.eu

4

Hello, I’m Matt from the Designy Visual Editor app team,

To make your header background white when the menu is open, you can add the following CSS rule to your base.css file:

body:has(.menu-open) header {
background-color: #fff;
}

Here’s how you can edit the code:

  1. Go to your Shopify admin panel.
  2. Navigate to ‘Online Store’ > ‘Themes’.
  3. Find your current theme and click ‘Actions’ > ‘Edit code’.
  4. Locate the base.css file in the ‘Assets’ folder.
  5. Paste the CSS rule at the end of the file.
  6. Save the changes and preview your site to see the effect.

Hope this helps!

Best regards,
Matt

2 Likes
5

This worked perfectly,

Thank you so much Matt :slightly_smiling_face:

1 Like