How to fix a double border problem in a search bar?

Store Design
, , , ,
1

Hi there folks, currently i’m experiencing this problem:

I have a search bar in my header, and when i open the search bar, or when i click on it to write, there is a double border (black border) all through my beautiful searchbar :face_with_tongue:

One picture shows the searchbar have a black border through it and the other picture is how it should look like, always.

When i click the bar: https://gyazo.com/1ac252826bd87678be8710f5945f77b4
How it should look like: https://gyazo.com/7d64382b820a8dc7be1a491826e99a8d

Been searching in several css and liquid files to fix it, but can’t seem to find the solution.
Anyone know how to solve this?

1 Like
2

Hi @MGNetworks ,

Can I check it? Would you mind to share your URL website? with password if its protected. Thanks!

3

Sure, head over to https://zenatal.nl and try the search option in the header.

Fun thing is when you search for anything, u get to the result page where the same input looks fine.

1 Like
4

Thank you for the information. The cause for this one is padding.

Try this one.

  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.
details[open] div {
    padding: 0px;
}

Result:

Ribe_Dagandara_0-1690406809210.png
Ribe_Dagandara_0-1690406809210.png825×244 4.63 KB

I hope it help.

5

Works, thanks a lot.

I see now i indeed added padding to details[open] in base.css while i was trying something on another page earlier today, never knew it would affect the search bar.

Thanks

1 Like
6

Yeah, ive been reading all the code looking for border. :laughing:

1 Like