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

I’m really happy with my navigation customisations, however the only part I’m stuck on is disabling the transparent background header styling when the mega menu is opened. Any ideas?

Thanks in advance!

Store: https://manifest-a-pearler.myshopify.com/

Password: pearler
Dawn Theme

Current:

Current
Current3064×826 138 KB

Desired:

Desired
Desired3064×832 103 KB

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

3

Thanks @PageFly-Victor ! This didn’t work I’m afraid. Here’s my current code I have:

/** ? ? ? Transparent Header ? ? ? **/
body.template-index .header-wrapper {
  position:absolute;
  width:100%;
  background-color:transparent;
}

/** ? ? ? Solid Background on Scroll ? ? ? **/
.scrolled .header-wrapper {
  transition:1s;
  background-color: rgb(var(--color-background), 1) !important;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 1); 
}
4

Please help me remove this code it will show the background you want.

PageFlyVictor_0-1673320092599.png
PageFlyVictor_0-1673320092599.png1600×908 259 KB

PageFlyVictor_1-1673320092673.png
PageFlyVictor_1-1673320092673.png1600×899 393 KB

5

Hello @pearlerwork ,

It’s GemPages support team and glad to support you today.

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1673325864190.png
GemPages_0-1673325864190.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

6

Thank you! It hasn’t worked however I’ve added the code and kept it there if you want to take a look? @GemPages

7

Hi @pearlerwork ,

You could please try moving this code to before instead of

Best regards,
GemPages Support Team

8

Thanks - I’ve moved it but no change! @GemPages

9

Hi @pearlerwork ,

You still need to have this code before

You could please try re-adding it.

Best regards,
GemPages Support Team

10

@GemPages That’s perfect - thanks so much!

11

hello! I tried to make this work for me, but the change-bg-custom color stays active even when I close the mega menu. I don’t have it enabled on my live site, but you can take a look: craefta.studio

You can see I have a nav background on hover, but when the mega menu is open and you moue off the menu, the main nav background reverts to the page background. I want it to stay the hover color when open.