Center the search bar

Solved
Highlighted
New Member
3 0 0

Hi everyone!

I want to change my search bar position in my store.

Now the search bar on the top right corner, I want it will be at the center above the main menu and below the logo.

And I prefer it will be wider if that thing possible.

I use Minimal them.

Many thanks

Alon

0 Likes
Highlighted
Excursionist
29 5 4

Hello Alon,
May I have your store URL?

0 Likes
Highlighted

This is an accepted solution.

Hello @Alonbakers,

If you want to make search bar in center then follow below steps

1. Go to Online Store->Theme->Edit code
2. Sections-->header.liquid file

2019-12-27_14-00.jpg

Add below css in

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media screen and (min-width: 769px) {
.header-bar__module.header-bar__search {
	min-width: 250px;
	float: left;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0

Thank you, It's working!

0 Likes
Highlighted
New Member
1 0 0

Hi,

I am having similar request.
Tried on the steps but seems different.
May I know how I can have the search bar on the top of my product list?

Currently, it is a small search link at the footer.
No one will notice it.

I would like to have a search bar on the top of my page for
https://ioanything.myshopify.com/

Would need guidance on this.
Thank you.

0 Likes
Highlighted
Tourist
3 0 1

Hi

I would like to change my website search bar as look like below website header as like same. Can you help me to change in desktop and mobile version?

 

My Store link:  https://rrb-fashions.myshopify.com/

password : glawoo

Header Search bar and Free Shipping World WideHeader Search bar and Free Shipping World Wide

Reference Header Website: https://gugumama.com/

 

and 

 

Slider also to change full width option  W1920 XH 600 pxl.

0 Likes
Highlighted
Tourist
3 0 1

@oscprofessional 

Hi

I would like to change my website search bar as look like below website header as like same. Can you help me to change in desktop and mobile version?

 

My Store link:  https://rrb-fashions.myshopify.com/

password : glawoo

Header Search bar and Free Shipping World WideHeader Search bar and Free Shipping World Wide

Reference Header Website: https://gugumama.com/

 

and 

 

Slider also to change full width option  W1920 XH 600 pxl.

0 Likes