How can I add a sticky search bar on a website's hero image?

[Andrew-Alcott]

Hi there, 

Our business www.komerco.com.au would like to have a sticky search bar on top of the hero image on the website. We are currently using the debut theme. Any ideas on how best to do this?

Many Thanks 

[KetanKumar]

@Andrew-Alcott 

sorry for issue 

if possible to give me rough idea how do you have like this so i will guide you.

[Andrew-Alcott]

Thanks for the response Ketan, ideally I'd want something looking like the following, though proportions etc. looking better than my quick mockup:

[KetanKumar]

@Andrew-Alcott 

Thanks for the details i have this sorry is not possible simple CSS code 

It can be done by doing some code customization. Please take the help of a developer and hire Shopify Expert or me

[Lixon_Louis · Accepted solution]

@Andrew-Alcott You can do this in two simple steps. Try it on duplicate theme first, instead of the live theme

Open sections/hero.liquid  ( Image with text overlay section)  , locate <div class="hero__inner"> 

Copy the search-form code from templates/search.liquid (line 21-53)  and paste it before the closing tag of  <div class="page-width text-center">, which is the child element of <div class="hero__inner">. refer screenshot below.

If you need to regulate the width of search-form you can use the following CSS selector 

.hero__inner > form.search-form { max-width: xx}

Finally the updated code inside <div class="hero__inner"></div> should look like below. Let me know how it goes.  ("theme_version": "17.12.1")

      <div class="hero__inner">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
          {%- endif -%}
          {%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
            {%- capture ariaLabel -%}
              {{- section.settings.button_label -}}
              {%- if section.settings.button_link.type == 'frontpage_link' -%}
                : {{ 'homepage.general.title' | t -}}
              {%- elsif section.settings.button_link.type == 'catalog_link' -%}
                : {{ 'collections.catalog.title' | t -}}
              {%- elsif section.settings.button_link.object.title -%}
                : {{ section.settings.button_link.object.title -}}
              {%- endif -%}
            {%- endcapture -%}

            <a href="{{ section.settings.button_link }}"
              class="btn hero__btn"
              aria-label="{{ ariaLabel }}">
              {{- section.settings.button_label | escape -}}
            </a>
          {%- endif -%}
          <form action="{{ routes.search_url }}" method="get" role="search" class="search-form search-page-form">
            <div class="input-group input-group--nowrap">
              <div class="input-group__field input-group__field--connected search-form__input-wrapper">
                <input
                  type="search"
                  name="q"
                  value="{{ search.terms | escape }}"
                  placeholder="{{ 'general.search.placeholder' | t }}"
                  role="combobox"
                  aria-autocomplete="list"
                  aria-owns="predictive-search-results"
                  aria-expanded="false"
                  aria-label="{{ 'general.search.placeholder' | t }}"
                  aria-haspopup="listbox"
                  class="search-form__input"
                  data-search-page-predictive-search-input
                  data-base-url="{{ routes.search_url }}"
                />

                <input type="hidden" name="options[prefix]" value="last" aria-hidden="true" />

                <button type="reset" class="search-form__clear-action" aria-label="{{ 'general.search.clear_search_term' | t }}" data-search-page-predictive-search-clear>
                  {% include 'icon-close' %}
                </button>

                <div class="predictive-search-wrapper" data-predictive-search-mount="default"></div>
              </div>

              <button type="submit" class="search-form__connected-submit" aria-label="{{ 'general.search.submit' | t }}" data-search-page-predictive-search-submit>
                {% include 'icon-search' %}
              </button>
            </div>
          </form>
        </div>
      </div>

[Andrew-Alcott]

Lixon_louis, 

Amazing help so far, what you've suggested has placed the search bar in the hero image - a great result so thank you. A couple of minor issues as a result:

Firstly, there doesn't seem to be any padding between the subtitle text and the search bar and I'm not sure where to add the bottom-padding code here. Any ideas? It would be preferable to have the container centred against the hero image. 

Secondly, I'm getting an error message in my portal saying: 

HTML error found

Broken HTML has been detected in your theme's code.

Here's the C&P:

[Lixon_Louis]

1. set margin-top for the search-form using the CSS selector I mentioned above

.hero__inner > form.search-form { margin-top: 40px}

2.  I can see  that you have 4 </div> (closing tags) after the </form>. There should be only 3 </div>.

[Andrew-Alcott]

Lixon,

Thanks for spotting that extra div. That solved the issue. 

In terms of the code, I'm still not sure where I place:

.hero__inner > form.search-form { margin-top: 40px}

Which line would you paste the code on your last screenshot? 

Hopefully that should sort everything - thank you it is greatly, greatly appreciated. 

[Lixon_Louis]

Paste it at the very bottom of Assets/theme.css. If you are using older version of Debut, look for theme.scss.liquid inside Assets/

Remove  the '>'  

.hero__inner  form.search-form { margin-top: 40px}

[Andrew-Alcott]

Should have worked that out myself rather than putting it into the hero snippet. 

Thank you kindly for your help, very good of you.