Search Bar Overlapping Logo Issue in Header

[manbru]

Hey,

First I would need you to watch this video of my store to understand the problem: https://imgur.com/a/p7FrK82 

The search bar in my header overrides the logo which it should not. I believe it is because the logo does not have this "grid-template-area" so that at the moment it's not a separate element in the header which causes the search bar to override it.

My store: https://r1vex.myshopify.com/ 

I would be very grateful if you could help me fix this!

[manbru]

If you mean collaboration request, the code is 5850

[webwondersco]

@manbru Hope you are doing well.

Please add the below line of CSS code at the end of your CSS file.

body .desktop-search{
transform: translateX(-45%)!important;
}

result:

[manbru]

This didn't work unfortunately?

[webwondersco]

@manbru where did you add this CSS? can you share the screenshot?

[manbru]

The code you provided only moves the search bar, and does not really fix the problem.

As you can see in this image below I need to add this line that that exist for the icons in my header, and give the logo an exactly the same "border/container" because it is this line that makes the search bar unable to overlap the logo.

[webwondersco]

Okat got it. but for that, need to update your header structure and update some CSS to make it possible.

[manbru]

Okay sounds very good!