Hey all! I am using Dawn 15.4.0
Wondering how I can extend the length of my search bar
I’ve tried everything haha I need y’all 
Topic summary
Goal: Make the search bar wider in the Dawn 15.4.0 theme.
What worked:
- Adding CSS in theme.liquid (above ) to increase the search form’s width on larger screens:
- @media (min-width: 768px) { form.search.search-modal__form { min-width: 93.5rem !important; } }
- OP confirmed this achieved the desired longer search bar.
Alternative approach (layout-focused):
- Add CSS in the Header section’s Custom CSS to allocate more header space to the search using grid:
- @media (min-width: 990px) { .header–top-left { grid-template-columns: 1fr 2fr; } .header__icons, .desktop-search { width: 100%; } }
- This changes the column split so the search area grows more naturally.
Follow-up issue and fix:
- After lengthening the bar, the input field didn’t fully expand. Cause identified in base.css:
- .search__input, input[type=search] { width: 100% !important; max-width: 900px !important; }
- Resolution: remove or increase max-width so the input fills the new space.
Notes:
- Code snippets and screenshots are central to understanding the changes.
- Status: Primary issue resolved; secondary input-width fix provided, pending confirmation.
2 Likes
Hey @user3541
Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.
Best Regards,
Moeed
Good day @user3541 , could you please share your store URL and password so that I can provide you with a solution?
In order to increase the width of the Search bar, you need to follow these steps.
Go to Shopify Admin >> Online Store >> Edit code >> base.css
In the end of base.css paste the following code that shared below.
@media only screen and (min-width: 989px) {
.search-modal__form {
min-width: 705px !important;
}
}
Results:
You can also increase the number for the Width from 705px to any number that suits with your requirements.
Hey @user3541
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
form.search.search-modal__form {
min-width: 93.5rem !important;
}
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
2 Likes
it worked thank you so much!
1 Like
Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.
I’d rather suggest this code:
You should be able to paste it into “Custom CSS” of the Header section.
Then you can control the split by changing the grid-template-columns value:
@media screen and (min-width: 990px) {
.header--top-left {
/* default is grid-template-columns: 1fr auto; */
grid-template-columns: 1fr 2fr;
}
.header__icons,
.desktop-search {
width: 100%;
}
}
Okay now that the search bar is long the actual search is not correlated can you guys help one last time?
In your base.css you still have this rule
.search__input,input[type=search] {
width: 100%!important;
max-width: 900px!important;
box-sizing: border-box
}
max-width prevent your search input from fully filling the space.