Changing search bar size

ColombiaStudio
Excursionist
29 0 13

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)  

Replies 5 (5)

Jasoliya
Shopify Expert
4808 621 1214

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ColombiaStudio
Excursionist
29 0 13

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

 

Jasoliya
Shopify Expert
4808 621 1214

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 custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
suyash1
Shopify Partner
9033 1123 1482

@ColombiaStudio - can you please share your website link?

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI
ColombiaStudio
Excursionist
29 0 13
Yes it’s
https://www.colombiastudiof.com/
Password is twingu