Dawn theme - dropdown menu hidden behind content

Shopify Discussion

Topic summary

Issue: In the Shopify Dawn theme, the header’s dropdown menus are rendering behind the main page content after a “Blog” menu item (without submenu) was added, making navigation difficult. The problem occurs consistently across pages.

Context/attempts: The site owner is not comfortable editing code, suspects a z-index (CSS stacking order) issue, and asks where the header/menu CSS is defined and what to change. No custom z-index was previously set.

Suggestions: A responder recommends increasing the z-index on the appropriate selector (so the menu stacks above content) and requests the store URL to inspect. They offer to review privately.

Actions taken: The site owner shared access details via private message/email as requested.

Status: No public fix or code change has been posted yet; the thread remains unresolved and pending further investigation via PM.

Notes: Likely remedy involves assigning a higher z-index to the header/navigation container or dropdown element, ensuring it’s positioned (e.g., relative/absolute) so the z-index takes effect.

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

Hello there,

Our website uses the Dawn theme and has a Header on the main site which has menu items and submenu items that drop down. This used to work, but as we added a ‘Blog’ link to the Header (which has no submenu items), the drop down menu now appears behind the main portion of the website, making it very difficult to see menu items and indeed navigate.

Are there any suggestions to fix this? I’m not really adept at Shopify (yet), so not sure if I can amend something directly, or need to modify the CSS code. I looked at suggestions about adding some sort of z-index of a higher order than other areas of the website, but I honestly am not sure how to do so.

For example, where is the code which is specific for the header and menu/submenu items? What code would I add? The main content changes depending on which menu items is selected, but it consistently reflects an experience where the drop down menu appears hidden behind the content on the bulk of the page.

Please help!!

1 Like
2

Hi @cyberbill2023

If you like to used the z-index just choose the selector on that area. Or if you would not mind can I take a look? May I know your Store URL website? Thanks!

1 Like
3

Hi Ribe,

Sure, send me your email and I will send you a link to the website.

I didn’t in fact choose any z-index, just whatever default behaviour is there.

Kind regards,

Bill

1 Like
4

You can PM me anytime. Thanks!

1 Like
5

Sent.

6

Any thoughts on this @Made4uo-Ribe ?