How do I solve the header/mega menu issue on Dawn theme?

Shopify Discussion

Topic summary

Header mega menu clicks are being captured by the homepage banner, redirecting users to the banner’s linked collection instead of the chosen sub-category. Issue occurs on desktop and mobile, suggesting click-through from the menu to the banner beneath it.

Key details:

  • Temporary workaround: banner link removed and a visible “Shop now” button added to avoid misdirects. Goal is to make the entire banner image clickable again and remove the button/retainer on mobile without breaking the dropdown menu.
  • Store URL provided for debugging: https://shophelloindigo.com/.
  • Community diagnosis: likely a CSS stacking order (“index”) issue where the megamenu’s layer sits under the banner, causing clicks to hit the banner. This typically involves adjusting z-index so the menu overlays the banner when open.
  • Images were shared to illustrate the problem and the temporary fix.

Outcome/status: No concrete code changes or file-level guidance posted yet. The thread remains open, awaiting specific CSS/z-index adjustments to ensure the mega menu sits above the banner while preserving a clickable banner when the menu is closed.

Summarized with AI on January 10. AI used: gpt-5.
1

This issue is difficult to explain. I know there is an issue with coding but I don’t know how to fix it. From the header menu, if you click on clothing and then on any sub-category the page is directed to whatever collection is linked to the banner. It’s almost like you’re clicking through the mega menu.

Once redirected to the banner collection, if you select the page you want navigate to again it takes you to the correct page. This also happens on mobile.

Can anyone help me figure out how to fix this?

Katielabernathy_0-1702429171835.png
Katielabernathy_0-1702429171835.png368×429 49 KB

I was able to temporarily fix the issue by removing the collection link and adding a visible “shop now” button. Please see image.

Katielabernathy_1-1702429205759.png
Katielabernathy_1-1702429205759.png400×247 55.1 KB

I would like my customers to be able to click anywhere on the banner image and it take them to a linked collection page, not have to click on the “shop now” button. I’d like to remove the “shop now” button and the retainer on the mobile version without the dropdown menu being affected. Can someone take a look at the coding and help me fix this?

2

Can you share your store url please?

3

https://shophelloindigo.com/

4

Looks like a css index issue. Somehow the megamenu index is set under the banner,

5

Do you happen know how to fix this? Im very new to coding and not sure how to resolve this issue.

6

Can you send me the store url?

7

https://shophelloindigo.com/

8

The store URL is https://shophelloindigo.com/

9

The store URL is https://shophelloindigo.com/