EZFY Search

ezfy-header-search.liquid

<div class=" EzfySearch EzfySearch--{{ search_type }} search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}" tabindex="-1">
              {%- if settings.predictive_search_enabled -%}
                <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
              {%- else -%}
                <search-form class="search-modal__form">
              {%- endif -%}
                  <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
                    <div class="field">
                      <input class="search__input field__input"
                        id="Search-In-Modal-1"
                        type="search"
                        name="q"
                        value="{{ search.terms | escape }}"
                        placeholder="{{ 'general.search.search' | t }}"
                        {%- if settings.predictive_search_enabled -%}
                          role="combobox"
                          aria-expanded="false"
                          aria-owns="predictive-search-results"
                          aria-controls="predictive-search-results"
                          aria-haspopup="listbox"
                          aria-autocomplete="list"
                          autocorrect="off"
                          autocomplete="off"
                          autocapitalize="off"
                          spellcheck="false"
                        {%- endif -%}
                      >
                      <label class="field__label" for="Search-In-Modal-1">{{ 'general.search.search' | t }}</label>
                      <input type="hidden" name="options[prefix]" value="last">
                      <button type="reset" class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}" aria-label="{{ 'general.search.reset' | t }}">
                        <svg class="icon icon-close" aria-hidden="true" focusable="false">
                          <use xlink:href="#icon-reset">
                        </svg>
                      </button>
                      <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
                        <svg class="icon icon-search" aria-hidden="true" focusable="false">
                          <use href="#icon-search">
                        </svg>
                      </button>
                    </div>

                    {%- if settings.predictive_search_enabled -%}
                      <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
                        <div class="predictive-search__loading-state">
                          <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                            <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                          </svg>
                        </div>
                      </div>

                      <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
                    {%- endif -%}
                  </form>
              {%- if settings.predictive_search_enabled -%}
                </predictive-search>
              {%- else -%}
                </search-form>
              {%- endif -%}
          </div>
                                      
<style>
 .header__search{
     display: none !important;
}
 .field__visible{
     min-width:120px;
     display: block;
}
 .search-modal__content{
     padding: 0 20px;
}
/* mobile devices only */
 @media (max-width: 988px){
     .EzfySearch--mobile{
         display: block;
    }
     .EzfySearch--desktop{
         display: none;
    }
    .search-modal__content{
     padding: 10px 15px;
}
}
/* desktop devices */
 @media (min-width: 989px){
      .EzfySearch--mobile{
         display: none;
    }
      .EzfySearch--desktop{
         display: block;
    }
   .header__icons{
     width: 80%
   }
}
</style>