Debut Theme - How to keep search box open?

[Bruna_Gasparott]

Hello,

Does anyone know how to keep the search box open on Debut theme?

TIA

[Russ_Davey]

Id also like to know this.

[Alexandru_Derev]

Hey guys,

For this you need to do two things:

1. Add the class "search--focus" to the form in Snippets/search-box.liquid so it looks like this : 

   <form action="/search" method="get" class="search-header search search--focus" role="search">
     <input class="search-header__input search__input"
       type="search"
       name="q"
       placeholder="{{ 'general.search.placeholder' | t }}"
       aria-label="{{ 'general.search.placeholder' | t }}">
     <button class="search-header__submit search__submit  btn--link" type="submit">
       {% include 'icon-search' %}
       <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
     </button>
   </form>
   

   Notice the added search--focus.

2. Adjust the javascript code here Assets/theme.js, line : 1141 - 1143 (if the theme was not adjusted, if it was just look for this code in the file.) to look like this: 

    $(selectors.searchHeaderInput).add(selectors.searchHeaderSubmit).on('focus blur', function() {
         //$(selectors.searchHeader).toggleClass(classes.focus);
       });

   This will comment out the hidding/showing functionality and your searchbox will always be displayed. 

Hope this helps! 

Let me know if you have questions.

Cheers!

[alionaz]

Thank you! It worked

[trendagogy]

Hi!

I tried copying and pasting this into the form, but my search bar is still not remaining open. I also switched Input and Submit like how you showed it in your second picture. Could you please help me with a step-by-step instruction on this?

[ehop66]

Is it possible to do this on desktop only and leave the default sea h box closed on mobile? When the search box os open by default on mobile it hides the entire header. Thanks in advance!

[Jenny2021]

I followed step 1 on my website, rauq.ca.

I'm not sure what step 2 does, as it didn't work for me. I tried pasting over lives 1141-1143 in Debut and also tried adding this code to lines 1141-1143. Nothing changed.