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/

[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!

[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

[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.

[surajkumawat]

Hello PartyFair,

Please follow the below steps:

Access your theme editor:

• Go to your Shopify admin.
• Navigate to Online Store > Themes.
• Click Actions > Edit Code on the Dawn theme.
  
  Check Base.css file
  
  Try this code
  

  /* Center the search bar */
  .header__search {
  display: flex;
  justify-content: center;
  align-items: center;
  }

  /* Adjust the width of the search bar */
  .search-bar {
  width: 150%; /* Increase width by 50% */
  max-width: 600px; /* Optional: Set a max-width */
  }

  /* Adjust the input field styling (optional) */
  .search-bar__input {
  width: 100%; /* Ensure it uses the full width of the container */
  padding: 0.5rem; /* Add padding for better appearance */
  border: 1px solid #ccc; /* Optional: Add a border */
  border-radius: 4px; /* Optional: Round corners */
  }
  
  Note: Take Backup/work in copy theme before putting this in live.
  
  Thanks,

[PartyFair]

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