Header image covers the drop down menu on the mobile version of my site

Store Design
,

Topic summary

On the mobile homepage, the header image overlays the opened navigation menu, hiding the first menu option even while scrolling. Screenshots were provided to illustrate the overlap.

After the store URL was shared, one suggestion proposed adding custom code to theme.liquid before , but no specific code was included in that post.

Effective fix: add CSS via Online Store → Themes → Edit code → Assets (base.css/style.css/theme.css). The provided media queries (at ~504px, 749px, and 371px breakpoints) increase margin-top for the mobile navigation elements (e.g., nav.mobile-nav-wrapper… and .mobile-nav__table) and slightly adjust .section-header. This moves the dropdown below the header so items are fully visible.

Outcome: The store owner confirmed the CSS solution resolved the issue. No further changes were requested.

Status: Resolved. Images were central to identifying the overlay behavior.

Key terms:

  • theme.liquid: Main layout file in Shopify themes.
  • CSS/media queries: Style rules that apply at specific screen widths to adjust layout for mobile.
Summarized with AI on January 20. AI used: gpt-5.
1

Hi!

I’m having an issue on the mobile version of my site, on the main page the header image is fine, but if you select the menu, the header image covers the first selection option, so people don’t know it is there. I’ve been told this is a coding issue but I don’t know how to fix it. Thank you for your help

Main Page

Screenshot_20230822-121857.png
Screenshot_20230822-121857.png1080×2400 385 KB

Drop Down menu selected, the first option is covered and the header stays on top of this option, even if you scroll down

Screenshot_20230822-121902.png
Screenshot_20230822-121902.png1080×2400 203 KB

1 Like
2

Hi @Bleu-Rose

Would you mind to share your Store URL wbesite? with password if its protected. Thanks!

3

Of course! My mistake, thank you!

https://bleurosedesigns.com/

1 Like
4

Hi @Bleu-Rose ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Best regards,

Anthony

1 Like
5

Thank you, Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 504px){
.mobile-nav__table {
    margin-top: 10px;
}
}
@media only screen and (max-width: 749px) {
nav.mobile-nav-wrapper.medium-up--hide.js-menu--is-open {
    margin-top: 40px;
}
.section-header {
    margin-top: 10px;
}
nav.mobile-nav-wrapper.medium-up--hide.js-menu--is-open.sub-nav--is-open {
    margin-top: 34px;
}
}
@media only screen and (max-width: 371px){
nav.mobile-nav-wrapper.medium-up--hide.js-menu--is-open {
    margin-top: 70px;
}
  • And Save.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Thank you so much! This worked!! What a relief!