I am a newbie and I am just getting started with all this so I apologize for my lack of education about this in advance. I am trying to change the size of the search bar on Magento 2. I have made a child theme from the parent magento and I just cant seem to change the width of the search bar. I did search the similar articles but I had no luck figuring it out.


Only Add some CSS to Change Width of Search Bar No Need to Overwrite any File.

Add This CSS code to your .css file

.page-wrapper .block.block-search {
    width: 100%;

For CSS File Path




NOTE:- Magento has multiple Theme for Different Stores so Kindly Check which Theme are Currently used. to check follow this step.

1) In Admin, go to CONTENT > Design > Configuration. A Design Configuration page opens. It contains a grid with the available configuration scopes.

2) In the configuration record corresponding to your store view, click Edit. The page with design configuration for the selected scope opens.

3) On the Default Theme tab, in the Applied Theme drop-down, select your newly created theme.

4) Click Save Configuration

5) If caching is enabled, clear the cache. Click System > Cache Management.Clear the invalid cache types.

6) To see your changes applied, reload the storefront pages.

Reference Link:- click here

I Hope This Helps You.


You have to just copy core file into your child theme and customize as per your need,


and add in your css file.

.header.content .block.block-search {width: 300px;}

I hope it will help you.


You can do this with some simple CSS.

/* Size of the search box */
.form-search input.input-text {
    width: 250px; /* Your desired width */

Hope it helps..

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.