Search Box Padding (Turbo Theme)

[EddyGrant]

Hey folks,

I'm attempting to integrate the Algolia search functionality with my Shopify theme (Turbo from Out of the Sandbox). 

The Search Box isn't rendering properly and seems to overlap. 

Could someone advise on which files need to be adjusted to fix this?

https://f96ybxthmtjzbhqv-63512314085.shopifypreview.com

Thank you,

Eddie

[Moeed]

Hey @EddyGrant 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
input#autocomplete-0-input {
    margin: 0 !important;
    padding: 0 !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[EddyGrant]

Legend, thank you Moeed, made a couple of tweeks, but that is working perfectly.

I have the same issue if you view the search results page. How can I adjust that?

[Moeed · Accepted solution]

Hey @EddyGrant 

Keep the previous code and add this new code in theme.liquid right above </style> with the same steps mentioned above.

input.ais-SearchBox-input {
    bottom: 5px;
    position: relative;
    border: unset !important;
}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed