How to improve search bar design for mobile and desktop?

[Benkor]

Hi!

i am struggeling with my search bar. It does not look good on neither mobile or desktop, and i dont have much time before store opening. Is it someone good at searchbar-difficulties og design that would take on a job?

[Dan-From-Ryviu · Accepted solution]

Yes, it can be. Code updated

<style>
.header-search {
    inset-block-start: -40px !important;
    z-index: 1 !important;
    border-bottom: 2px solid #000;
}
</style>

[Dan-From-Ryviu]

Hi @Benkor 

Can you drop your store link here?

[Benkor]

Https://korse.no

password backofficekorse

[Dan-From-Ryviu]

Hi @Benkor 

You can try to add this code to your theme.liquid file before </head> tag and check if it ok

<style>
.header-search {
    inset-block-start: -36px !important;
    z-index: 1 !important;
}

</style>

[Benkor]

Thanks! Is it posible to have it outlined so its more visible on white background?

[Dan-From-Ryviu]

Update code to this 

<style>
.header-search {
    inset-block-start: -40px !important;
    z-index: 1 !important;
    border: 2px solid #000;
}

</style>

[Benkor]

If i want just and underline and not total border, can i do that? 

[Dan-From-Ryviu · Accepted solution]

Yes, it can be. Code updated

<style>
.header-search {
    inset-block-start: -40px !important;
    z-index: 1 !important;
    border-bottom: 2px solid #000;
}
</style>

[Benkor]

Is it possible to have the search bar placed over the logo and menu bar?

[Dan-From-Ryviu · Accepted solution]

Update code 

<style>
.header-search {
    inset-block-start: -40px !important;
    z-index: 1 !important;
}
.header-search::part(content) {
    padding: 36px 0 !important;
}
header-search .container {
    border-bottom: 1px solid #000;
}
</style>

Mobile:

Desktop: 

[Benkor]

Thank you so much for taking the time!

[Dan-From-Ryviu]

You are very welcome, @Benkor