Debut Theme: Search Bar Getting Hidden below the Menu Header

Solved
Highlighted
Excursionist
30 0 3

Working on store: http://sanity-india.myshopify.com/
Theme: Debut
Output Required:
When someone clicks on the search icon there should be search bar coming below the header on all devices & operating system by default.

Current status:
Desktop: I'm getting small search bar on header towards top-right corner. OS: windows
Desktop: I'm getting search bar behind the header menu, that is invisible. OS: Mac
Mobile: I'm getting search bar behind the header menu, that is invisible. OS: Apple & Android

Required solution:
Without changing the current sticky header menu need to add a search bar padding just below the header or simply a search bar in center of screen. Optimized for all devices.

0 Likes
Highlighted
Shopify Expert
247 25 32

This is an accepted solution.

Hello Saurya, 

 

Kindly add this CSS to your theme.scss file and check. The search will work perfectly fine. 

 

div#SearchDrawer.search-bar {
top: 0px !important;
}

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
30 0 3

Hi Pallavi,

 

Thank you for the solution it worked.
I'm providing you the test website link:

https://test-sanity-india.myshopify.com/

(Hover on the link for the password)

 

Can you check once with the mobile version if you double tap there is a black search coming at the top on header is there any way that we can fix the same like what we did for mac?

 

 

0 Likes