Why is my menu search button overlapping with account button

[Davidn]

Does anyone know why my menu search button looks to be overlapping with the account button? This only happens on narrow resolution.

my website link is gigglefabric.com

[topnewyork]

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 </head>

<style>
@media (min-width: 769px){
 svg.icon.icon-search {
    margin-left: 1rem !important;
}
}
</style>

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

[topnewyork]

@Davidn 

Instead of the above code, use this code

<style>
 @media (min-width: 769px) {
    svg.icon.icon-search {
        margin-left: -3rem !important;
    }
}
</style>

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

[PageFly-Richard]

Hi @Davidn 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
@media screen and (min-width: 990px) {
    .header>.header__search {
        grid-area: icons !important;
        justify-self: right;
        width: 55% !important;
        justify-content: center;
    }
}
</style>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Davidn]

Hi Richard

I just tried this code and it seemed to work well until i tried it on my 4k screen.

is there any way to fix this gap that's created when browsing on larger screens?

[topnewyork]

@Davidn 

try this code

<style>
summary.header__icon.header__icon--search.header__icon--summary.link.focus-inset.modal__toggle span {
   margin-right: -6rem !important;
}
</style>

[Davidn]

Still looks really weird, i dont think just changing the margin will help.