Add a search bar

ColombiaStudio
Excursionist
29 0 13

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

image.png

Screen Shot 2021-01-29 at 7.22.28 PM.png

KetanKumar
Shopify Partner
14304 1664 5143

@ColombiaStudio 

how do you like the search bar? always visible?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ColombiaStudio
Excursionist
29 0 13
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?
0 Likes
ColombiaStudio
Excursionist
29 0 13

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

0 Likes
KetanKumar
Shopify Partner
14304 1664 5143

@ColombiaStudio 

do you mean like this?

KetanKumar_0-1611991420399.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ColombiaStudio
Excursionist
29 0 13

Yes!

0 Likes
KetanKumar
Shopify Partner
14304 1664 5143

@ColombiaStudio 

Thanks for confirm it can be done some custom code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ColombiaStudio
Excursionist
29 0 13

Is there a custom code that I can use?

KetanKumar
Shopify Partner
14304 1664 5143

@ColombiaStudio 

Yes, please can you try this 

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

after this code view

KetanKumar_0-1612186250920.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ColombiaStudio
Excursionist
29 0 13

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