Add a search bar

[ColombiaStudio]

Hi

I would like my search bar to look like this video below, can someone help me please. Please check the url to see how my current search bar looks, it overlaps the page which I do not want

Click URL

 

[KetanKumar]

@ColombiaStudio 

how do you like the search bar? always visible?

[ColombiaStudio]

No, As shown in the image; the search bar icon is on the page, when you
click on it, it appears. My search bar currently open completely which
overlaps my page, which I do not want. Is there any way to fix it?

[ColombiaStudio]

Basically I would like it to open on the header when you click on the icon rather then over it.  if that makes sense

[KetanKumar]

@ColombiaStudio 

do you mean like this?

[ColombiaStudio]

Yes!

[KetanKumar]

@ColombiaStudio 

Thanks for confirm it can be done some custom code

[ColombiaStudio]

Is there a custom code that I can use?

[KetanKumar]

@ColombiaStudio 

Yes, please can you try this 

.search-bar {
background-color: transparent;
    position: absolute;
    width: auto;
    right: 90px;
    top: -30px;
}

after this code view

[ColombiaStudio]

Where am I suppose to place that? if on header liquid, that did not work