Solved

How to move Search Bar under header logo?

NDS
Explorer
55 1 8

Hello Shopify community,

 

I am having an issue with my search bar, it opens when I click the logo but then you can't do anything. You can't close it or click to write, you now have to refresh the page to go back. Can we fix this by moving the search bar to open under the logo?

 

Thanks so much in advance!

www.newdaysports.com/pages/shop

pw: CoschStudio

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@NDS 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.Search[aria-hidden="false"] {
transform: translateY(130px);
    z-index: 9;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 3 (3)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@NDS 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.Search[aria-hidden="false"] {
transform: translateY(130px);
    z-index: 9;
}

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
cozydeliver
Excursionist
25 2 7

@KetanKumar Hi Ketan,

I have similar issue here, I had an announcment bar & header sticky on bar. The search bar is blocked by the announcement bar, how can I move it below the header? I tried to input your code above but it doesn't work.

Do you know how to solve this?

Website: www.cozydeliver.com I'm using debut theme.

cozydeliver_0-1624260745229.png

 

Best,

Vincent

 

KetanKumar
Shopify Partner
36839 3635 11972

@cozydeliver 

sorry for that issue i have check its work fine

KetanKumar_0-1624799323323.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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing