Dawn Theme: Sticky transparent header with mega menu that isn't transparent

Topic summary

A user implemented a sticky transparent header on their Dawn theme store but encountered visibility issues with the mega menu:

Main Problems:

  • When the mega menu activates (before scrolling), the header becomes invisible
  • The mega menu appears narrower than the header width
  • Issues only occur when the page hasn’t been scrolled yet
  • Once scrolled, everything displays normally

Visual Evidence:

  • User provided three screenshots showing the issue in unscrolled condition, with mega menu clicked but unscrolled, and after scrolling

Current Status:

  • Discussion remains unresolved
  • Original poster eventually abandoned the transparent header approach, switching to a standard sticky non-transparent header instead
  • Another user reported experiencing the same issue, indicating this may be a common problem with Dawn theme customizations
  • No working CSS solution has been identified
Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.

Hello,

Guys, I just edited my header so my header can be sticky and transparent. BUT, somehow when i activate the mega menu, the header can’t be visible. I mean, I want to make the header visible whenever the mega menu was shown. And for addition, somehow the mega menu was narrower than the header.

But all of those things happened whenever I’m not scroll the page yet, and it would be normal when I scroll it.

unscrolled condition:

unscrolled but I clicked the menu:

scrolled and clicked:

Please help me.

Hii @JosephineJoseph
Can you please share site url??

Is it this one? https://zbiavk5ewueswcl0-67885334816.shopifypreview.com

Please Help me. I can’t find any solution.

By chance did you find a solution for this? I’m having the same issue.

I’m sorry but no, I switched it to sticky non transparent one. At the end, I didn’t even find any solution.