How to keep the search bar open in Debut theme?

Store Design
1

Hi guys;

I’m having a hard time keeping the search bar open in debut, not just the icon but have also a search field open. Example:
63594413a06898273c0b16633c861c9d.png

I’ve searched for other topics for the same thing but they’re outdated. I know some code has to be deleted/written could someone help me out and point me where and what has to be done?

Thanks in advance.

2

This involves 3 steps.If you wish to follow i can assist.

3

Could you teach me how?

4

Hi Sorry for the late reply.

First you have to create a snippet call search-box.liquid. You can do so via the theme editor.

Then paste this inside search-box.liquid and click save :

{% if search.performed  %}

{% else %}

      

{% endif %}
5

Then open your header.lquid from Sections in theme editor.

Look for tag at around line 252.

Paste this just above tag :

{% render "search-box" %}
6

Then at same header.liquid find line 118 - 121 (roughly if your code was edited).

Remove this part and save :
7

Now you should have a search bar open below your menu.

8

How can we keep open search box for desktop view & clickable for mobile view ?

9

Hi,

I am having an issue with my search bar, in a sticky header, on Debut theme.

When I scroll down and press the search icon everything inside the following div doesn’t show:

The entire page becomes darker, just like when you open the search bar.

I think the search bar is open somewhere in top of the page, where is not supposed to be with a sticky header.

Any hints?

Thank you,

Best regards

10

Hello @ChoosiZon ,

Upon adding your code, the search bar does not give me product suggestions anymore. How may I fix that.?

11

I face the same issue is there a solution for that

12

Hello @Khan01 ,

Did you ever find a solution for this?

Thanks!