Debut Theme: Search Bar Getting Hidden below the Menu Header

Shopify Discussion
1

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.

2

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

1 Like
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?

4

How can i remove the excessive white space above
How can i remove the excessive white space above1077×444 19.4 KB

Please how can i remove the excessive white space above the logo?