Center Align the Search Bar in the Header

Store Design
1

I’m having a hard time moving my search bar to the middle. I’ve managed to add a static search bar to my site instead of the pop up and I’ve removed the default search icon but I’m having trouble moving the new search box to the middle of my header. I want the logo to the left, with the search box in the middle between the logo and the account / cart icons. Any advice?

megait_0-1647332510312.png
megait_0-1647332510312.png1374×178 28.4 KB

this is what we had in mind:

Header example.JPG
Header example.JPG1645×127 19.4 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hi @megait ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

4

its https://sampletest555.myshopify.com/

and the password is ahpral

5

Hi @megait ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-predictive-search.css->paste below code at the bottom of the file:
@media (min-width: 992px) {
.header predictive-search {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
6

Hello There,

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media (min-width: 992px) {
.header predictive-search {
position: absolute !important;
left: 50%;
transform: translateX(-50%);
top: 30px;
}
}
7

Thank you so much! It worked!