(Debut Theme) Keep the search bar open

Solved
Joemark1
New Member
2 0 0

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: 

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.

0 Likes
ChoosiZon
Trailblazer
219 39 66

This is an accepted solution.

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

0 Likes
Joemark1
New Member
2 0 0

Could you teach me how?

0 Likes
ChoosiZon
Trailblazer
219 39 66

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 %}
<div class="search-form__container" data-search-form-container="">
      <form class="search-form search-bar__form" action="/search" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input required type="text" name="q" placeholder="Search" role="combobox" aria-autocomplete="list" aria-owns="predictive-search-results" aria-expanded="false" aria-label="Search" aria-haspopup="listbox" class="search-form__input search-bar__input" data-predictive-search-drawer-input="" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">
          <input type="hidden" name="options[prefix]" value="last" aria-hidden="true">
          <div class="predictive-search-wrapper predictive-search-wrapper--drawer" data-predictive-search-mount="drawer"></div>
        <div style="position: absolute !important; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0;" data-search-announcer="" aria-live="polite" aria-atomic="true"></div></div>

        <button class="search-bar__submit search-form__submit" type="submit" data-search-form-submit="">
          <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 37 40"><path d="M35.6 36l-9.8-9.8c4.1-5.4 3.6-13.2-1.3-18.1-5.4-5.4-14.2-5.4-19.7 0-5.4 5.4-5.4 14.2 0 19.7 2.6 2.6 6.1 4.1 9.8 4.1 3 0 5.9-1 8.3-2.8l9.8 9.8c.4.4.9.6 1.4.6s1-.2 1.4-.6c.9-.9.9-2.1.1-2.9zm-20.9-8.2c-2.6 0-5.1-1-7-2.9-3.9-3.9-3.9-10.1 0-14C9.6 9 12.2 8 14.7 8s5.1 1 7 2.9c3.9 3.9 3.9 10.1 0 14-1.9 1.9-4.4 2.9-7 2.9z"></path></svg>
          <span class="icon__fallback-text">Submit</span>
        </button>
      </form>
</div>

{% endif %}

 

 

0 Likes
ChoosiZon
Trailblazer
219 39 66

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

Look for </header> tag at around line 252.

Paste this just above </header> tag :

{% render "search-box" %} 
0 Likes
ChoosiZon
Trailblazer
219 39 66

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

Remove this part and save :

 

<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top">
            {% include 'icon-search' %}
            <span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>

 

 

0 Likes
ChoosiZon
Trailblazer
219 39 66

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

0 Likes