Does anyone know why my menu search button looks to be overlapping with the account button?

Store Design
,

Topic summary

A user encountered a header layout issue where the search button overlaps with the account button on screens above 990px width. The problem appeared after adding custom CSS to move their logo from center to left alignment.

Troubleshooting attempts:

  • Another user provided updated CSS code targeting the header grid layout with specific media queries
  • The solution involved restructuring grid-template-areas and adjusting column widths across different breakpoints
  • Initial code caused additional layout problems with the header display
  • A revised version with !important flags and adjusted grid columns was offered

Outcome:
The issue remained unresolved. The original poster decided to disable the search button temporarily rather than continue troubleshooting, acknowledging the complexity of the problem. The discussion remains open without a working solution implemented.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

This only happens on small width screens that are above 990px

Davidn_0-1740652271369.png
Davidn_0-1740652271369.png244×149 1.34 KB

I assume the glitch happened because I added code that would fix my logo being stuck in the center, i wanted it moved left.

This is the code:

<style>
      @media screen and (min-width: 990px) {
          .header--top-center {
              grid-template-areas: "heading navigation icons" !important;
              gap: 20px;
          }
          .header {
              grid-template-columns: auto 1fr 1fr !important;
          }
          .header>.header__search {
              grid-area: icons !important;
              justify-self: right;
              width: 30%;
              justify-content: center;
      }
          .header--top-center .header__inline-menu {
              justify-self: left !important;
          }
      }
    </style>

My website is gigglefabric.com

2

Hi @Davidn

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
.header {
  display: grid;
  grid-template-areas:
    "heading"
    "navigation"
    "icons";
  gap: 10px;
}

.header__search {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .header--top-center {
    grid-template-areas:
      "heading navigation"
      "icons icons";
    gap: 15px;
  }
  .header {
    grid-template-columns: 1fr 1fr;
  }
  .header__search {
    width: 50%;
  }
}
@media screen and (min-width: 990px) {
  .header--top-center {
    grid-template-areas: "heading navigation icons";
    gap: 20px;
  }
  .header {
    grid-template-columns: auto 1fr 1fr;
  }
  .header__search {
    grid-area: icons;
    justify-self: right;
    width: 30%;
  }
  .header--top-center .header__inline-menu {
    justify-self: left;
  }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

1 Like
3

After inserting this code my header looks like this

Davidn_0-1740658686288.png
Davidn_0-1740658686288.png2590×263 17.3 KB

4

@Davidn

I have updated the code; please try this one and remove the previous code I provided.

.header {
  display: grid;
  grid-template-areas:
    "heading"
    "navigation"
    "icons";
  gap: 10px;
}

.header__search {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .header--top-center {
    grid-template-areas:
      "heading navigation"
      "icons icons";
    gap: 15px !important;
  }
  .header {
    grid-template-columns: 1fr 1fr;
  }
  .header__search {
    width: 50% !important;
  }
}

@media screen and (min-width: 990px) {
  .header--top-center {
    grid-template-areas: "heading navigation icons" !important;
    gap: 20px !important;
  }
  .header {
    grid-template-columns: auto 1fr auto !important;
  }
  .header__search {
    grid-area: icons !important;
    justify-self: right !important;
    width: auto !important;
  }
  .header--top-center .header__inline-menu {
    justify-self: left !important;
  }
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

1 Like
5

I’ve decided to just turn off the search button for now, it seems this is a more complicated issue than I thought.

Thank you for your time and effort.