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

Store Design
, ,
1

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%)

Screenshot 2024-12-16 at 5.17.20 AM.png
Screenshot 2024-12-16 at 5.17.20 AM.png2264×352 38.9 KB

2

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

3

https://www.partyfairfreehold.com/

4

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

5

Thank you, that made it wider but not centered.

Screenshot 2024-12-16 at 5.37.25 AM.png
Screenshot 2024-12-16 at 5.37.25 AM.png2316×380 41.4 KB

6

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

78.png
78.png1227×131 13 KB

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

7

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:

websensepro_0-1734346492066.png
websensepro_0-1734346492066.png958×522 492 KB

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!

8

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.

Screenshot 2024-12-16 at 5.53.47 AM.png
Screenshot 2024-12-16 at 5.53.47 AM.png2278×362 40.9 KB

9

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

10

I’d like it in the center of the page

11

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

79.png
79.png1904×156 84.2 KB

Thanks

12

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.

13

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