timber - how to increase the width of search box on shopify
I'm trying to increase the width of the searchbox in Shopify timber framework but having problems. The padding can be increased, but the input field stays the same size. Any suggestions will be greatly appreciated. Thanks!
The quick answer is to find
timber.scss.liquid (found in the assets folder) and remove the line
max-width: 400px. This will let the search box take up 100% of it's parent width.
If you want to adjust it further than that, you can adjust the grid item sizes in the header. See the image below and notice the
There you'll see
large--one-half large--text-right medium-down--hide.
large--one-half is what dictates the container size on your large breakpoint. Change that to something like
large--two-thirds and it'll get wider — though be sure to also adjust the div right before it to
large--one-third, otherwise your search
grid__item will stack below your shop name/logo.
See the full Timber docs (https://shopify.github.io/Timber/#grid) to get a better understanding of the grid as well.
Didn't find the answer?
Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.