Changing search bar size

Tourist
11 0 4

Hi,

I have a question, I want to change my search bar as you see in the pictures in this message, when I click on my search bar icon I get a huge search box that opens up and overlaps the page I want to reduce the size of the search bar so it doesn't open up across the page but rather it opens up just a slight bet or in a corner basically have a small discreet search box in the corner of the page where the icon is. how I can I make this happen please I need help!!

IMG_0686.jpg

 

I want it to look like something like this

IMG_0684.jpg

 

IMG_0685.jpg

(I do not want to change the position of the icon just the search bar size)  

0 Likes
Shopify Expert
4037 563 967

Hi @ColombiaStudio 

You cant manage animation easily for that need more custom code.

But you can make it smaller by this code.

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

.search-bar__form{ flex: none;}

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
11 0 4

Hi,

Thank you, it reduced the size but the search bar still overlaps as
shown below. How do you make it open only on the header? and not the whole
page?

Screen Shot 2020-12-05 at 11.19.51 AM.png

 

0 Likes
Shopify Expert
4037 563 967

For that we have to change code, cant give you step code for that, PM me if you want we have to custom code it 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Shopify Partner
1488 148 208

@ColombiaStudio - can you please share your website link?

you are welcome to contact me.
My email - suyash.patankar@gmail.com
0 Likes
Tourist
11 0 4
Yes it’s
https://www.colombiastudiof.com/
Password is twingu
0 Likes