When I click my drop down menu on mobile the hero image and shop now button come through it and make it unusuable. How do I fix this?
Topic summary
A mobile display issue is occurring with the Dawn theme where:
Problem:
- Clicking the dropdown menu causes the hero image and “Shop Now” button to overlap/appear through the menu
- This overlap makes the dropdown menu unusable on mobile devices
Status:
- The issue remains unresolved with no responses yet
- Likely requires CSS adjustments to fix z-index layering or positioning conflicts between the navigation menu and hero section elements
Share a link to your store.
Usually, Dawn does not have this problem,
so this may be a side-effect of some of your edits or some apps you’re using – need to see your page to diagnose.
Any help would be huge appreciated - www.kewlbro.com.au
The issue is only occurring when you click the menu on the homepage, not any other page
Aha, so that was an AI-generated banner section 
Try this:
go to “Customize”=> Theme settings (cog icon), scroll down to “Custom CSS” and paste this:
.section-header.shopify-section-group-header-group {
z-index: 10;
}
This should “elevate” your header above the banner.
Unfortunately it didn’t work
Not seeing the code applied at your site?
Try now and let me know if it works on your end
Not seeing it.
Are you Cusomize’ing live theme? If not – share a preview link.
Share a screenshot?
Sorry, I meant a screenshot of where you’re applying it
Sorry, looks like another “Custom CSS” unexpected pickiness.
Try this instead:
go to “Custom CSS” of the “Header” section and paste this:
{
z-index:10;
}
Like this:
This should work and should solve your problem.
Thanks @tim_1 this worked!