1

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.

New contributor
markp is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
0

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

app/design/frontend/[vendor_name]/{themme_name}/Magento_Theme/web/css/cssFileName.css

OR

app/design/frontend/[vendor_name]/{themme_name}/web/css/cssFileName.css

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.

  • If it's works for you VOTE UP – Msquare 21 hours ago
1

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

app/design/frontend/{Packagename}/{childthemme}/Magento_Search/templates/form.mini.phtml

and add in your css file.

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

I hope it will help you.

0

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

New contributor
Akshay Prabhakar is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

markp is a new contributor. Be nice, and check out our Code of Conduct.

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.