How can I reduce the size of my website's search bar?

[ColombiaStudio]

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

I want it to look like something like this↓

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

[Jasoliya]

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;}

[ColombiaStudio]

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?

[Jasoliya]

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 

[suyash1]

@ColombiaStudio - can you please share your website link?

[ColombiaStudio]

Yes it’s
https://www.colombiastudiof.com/
Password is twingu