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.
2

Hi @pearlerwork

This is Victor from PageFly - Landing Page Builder App.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file base.css

body.template-index .header-wrapper{
background-color: rgb(var(--color-background), 1) !important;
}

Hope this answer helps.
Best regards,
Victor | PageFly