Dawn Theme - Mega menu drop down is being overlapped by text on product page. Please Help!!!

Technical Q&A
,

Topic summary

Main issue: In the Shopify Dawn theme, the header’s mega menu dropdown appears behind product page text (z-index/stacking context issue), while it displays correctly on other pages.

Context: Minimal theme customization; problem occurs specifically on product templates. Screenshots were shared to illustrate the overlap. CSS was suggested as a likely fix, pending inspection.

Actions: Support teams requested the store URL and password to investigate. The site info was provided privately. One support check reported no reproducible issue on the product page.

Latest development: The problem persists for the reporter on a MacBook but does not occur on a Windows laptop, suggesting an environment-specific rendering difference (browser/OS/device).

Outcome: No concrete fix was applied; the issue could not be reproduced by support. The reporter suspects a Mac-specific viewing issue and apologized for the confusion.

Status: Unresolved for the Mac environment; otherwise appears normal.

Open items:

  • Clarify exact browser/version on Mac and test across Safari/Chrome/Firefox.
  • Provide steps to reproduce and affected product URLs.
  • Consider a CSS z-index or position fix for the header/mega menu on product templates if reproducible.

Note: Screenshots are central to understanding the overlap behavior.

Summarized with AI on February 1. AI used: gpt-5.
1

Hello,

I am currently working on my new site but have ran into an issue I cannot solve. I am using the Dawn theme and have done minimal customization. When I click on my mega menu drop down (in my header) when on a product page the text of the mega menu is overlapped by the product text on the product page. It works fine on all my other pages but not on my product pages.

First photo is what it looks like normally second is what it looks like on a product page. Any help would be greatly appreciated!

Screenshot 2023-02-06 at 12.53.44 PM.png
Screenshot 2023-02-06 at 12.53.44 PM.png2148×1078 173 KB

Screenshot 2023-02-06 at 12.53.18 PM.png
Screenshot 2023-02-06 at 12.53.18 PM.png2148×1104 212 KB

2

Hi @MH_EC ,

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

3

Hello @MH_EC ,

Greetings from the Store Watchers Support Team! Happy to help you today.

Please provide your store URL so I can further check the issue. This could be fixed by adding a custom CSS.

Let me know if need further assistance

Regards,
Store Watchers Support Team

4

Hello,

Thank you for your reply. I sent you a message with my site info.

Thanks!

5

Hi @MH_EC ,

I checked your page and don’t see that issue:

GemPages_0-1675742013765.png
GemPages_0-1675742013765.png1907×1060 195 KB

Everything on the page working normally. So, pls re-check your page or tell me about the steps make that issue.

Best regards,
GemPages Support Team

1 Like
6

Hi @GemPages ,

That is very strange! I just tested it again to be sure and it is still showing my mega menu text behind the product text. I have tried it on different collection pages and on my home page and its works perfect. As soon as I go to my product page the issue is happening.

I just switched to my Windows laptop and the issue is gone. Must be an issue with the site and the way my MacBook views it?

My apologies I did not mean to waste your time!