How do I Center and Widen the Search Bar? - Dawn Theme

[PartyFair]

I used some code to change the search icon into a search bar in the Dawn Theme.

Does anyone know how to center and widen the search bar? (maybe another 50%)

[websensepro]

Hi @PartyFair , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[PartyFair]

https://www.partyfairfreehold.com/

[GTLOfficial]

Hello @PartyFair
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.search__input.field__input {
padding-right: 33.8rem !important;
}

Thanks

[PartyFair]

Thank you, that made it wider but not centered.

[GTLOfficial]

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

.field {
width: 66%;
margin-right: 44rem !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[websensepro]

Hi @PartyFair

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.desktop-search {
    padding-right: 130px;
}
.search__input.field__input {
    padding-right: 33.8rem;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[PartyFair]

Almost there! I’d like it centered if possible. I tried changing some numbers in the code that you provided but it wasn’t working for me.

[GTLOfficial]

you want to get it centered between logo and the login icon…???

[PartyFair]

I’d like it in the center of the page

[GTLOfficial]

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
.header__icons {
  padding-right: 6.8rem !important;
}
.search__input.field__input {
  padding-right: 49.8rem !important;
}
.field {
  width: 87%;
  }

result

Thanks

[PartyFair]

Thanks so much for your help, but it seems to be not working properly and there’s a glitch when using mobile. I appreciate your help, I think I’ll leave it the way it is for now.

[PartyFair]

Thank you, I pasted it at the end of the base.css file and nothing happened unfortunately.