Mobile menu slightly covered by top bar

Shopify Discussion

Topic summary

Issue: On mobile, the first line of the navigation menu is partially hidden by the top bar in the Gecko theme, making the hamburger (triple-bar) menu harder to tap. Top bar min-height is already set to 0.

Context: Store URL provided (spacesavingbed.com, no password). A screenshot illustrates the overlap; a follow-up image shows the fix result.

Proposed fixes (mobile ≤1024px):

  • Align header content vertically: add a media query in t4s-theme.css or t4s-base.css to set header elements with [data-header-height] to align-items: center (with !important).
  • Add top padding: in base.css/style.css/theme.css, add a media query setting .t4s-container { padding-top: 20px; } to create space below the top bar.

Implementation steps: Use Online Store → Themes → Edit code → Assets → edit the main CSS file and append the snippet; save.

Outcome: Original poster acknowledged both solutions with thanks, implying the issue is resolved. No disagreement or further questions. Images are central to understanding the before/after effect.

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

Hello! My store is spacesavingbed.com. I’m using the Gecko theme. On the phone, as you can see from the picture below, the first line of the menu is slightly covered by the top bar. This doesn’t seem like a big issue, but on phone, it makes it harder to tap the menu. Is there any way to move the triple bar menu/hamburger menu a tiny bit down, or to shorten the top bar? (the top bar min height is already at 0)

mobile menu covered.png
mobile menu covered.png370×880 154 KB

1 Like
2

Hi @AhmedAM ,

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

3

spacesavingbed.com. No password. Thank you :slightly_smiling_face:

1 Like
4

Hi @AhmedAM
Please add this code at the end of the css in the “t4s-theme.css” or “t4s-base.css” file

@media screen and (max-width: 1024px) {
  header.t4s-section-header [data-header-height] {
      align-items: center !important;
  }
}

Thanks

1 Like
5

Thank you for the information. Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
  4. And Save.
@media only screen and (max-width: 1024px) {
    .t4s-container {
    padding-top: 20px;
}
}
1 Like
6

Thank you so much.

7

Thank you very much!