How can I disable transparent background header when opening mega menu?

Store Design
, ,

Topic summary

A user seeks to disable transparent header background styling when opening a mega menu on their Shopify store using the Dawn theme.

Initial Solutions Attempted:

  • PageFly-Victor suggested adding CSS targeting .body.template-index .header-wrapper with background-color: rgb(var(--color-background)), but this didn’t resolve the issue.
  • The user already had custom CSS for transparent headers and solid backgrounds on scroll.

Working Solution:
GemPages support team provided a fix involving:

  1. Adding specific markup/code before the </head> tag in the theme.liquid file
  2. Initially suggested placing code before </body>, then corrected to </head>
  3. After repositioning the code correctly, the solution worked successfully.

Status: Resolved for the original poster.

Follow-up Issue:
Another user (modernhobbit) encountered a related problem where the custom background color persists even after closing the mega menu, rather than reverting to the page background. This remains unresolved in the thread.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
9

Hi @pearlerwork ,

You still need to have this code before

You could please try re-adding it.

Best regards,
GemPages Support Team