How to make searchbar static and not extendable?

NielsSchutte
Explorer
167 2 8

Hi Al,

I just graduated and I'm trying to open up a webshop. I came across Shopify and I'm kind of struggling a bit with small things, one of those small things is the search bar. The search bar icon extends itself when clicking on it so a input field will appear like this and the whole header will dissapear:

 

search.PNG

My question is: how to prevent this so the searchbar wont be extended so the rest of the header will be intact? Example:


Knipsel.PNG

Hope someone can help me with this first problem,

Thanks in advance!

0 Likes

Hello @NielsSchutte,

Can you please share site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes

@NielsSchutte,

Can you please share password

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
NielsSchutte
Explorer
167 2 8

I've send u a private message containing my password.

0 Likes

@NielsSchutte,

Please refer below link

https://community.shopify.com/c/Shopify-Design/Debut-Theme-How-to-keep-search-box-open/td-p/367673 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
NielsSchutte
Explorer
167 2 8

Hi,

I do not have this file:

Naamloos.png

I do have a file named: "search-drawer" but the content dont look like the one u posted, it looks like this:


<div id="SearchDrawer" class="search-bar drawer drawer--top" role="dialog" aria-modal="true" aria-label="{{ 'general.search.placeholder' | t }}" data-predictive-search-drawer>
  <div class="search-bar__interior">
    <div class="search-form__container" data-search-form-container>
      <form class="search-form search-bar__form" action="{{ routes.search_url }}" method="get" role="search">
        <div class="search-form__input-wrapper">
          <input
            type="text"
            name="q"
            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 search-bar__input"
            data-predictive-search-drawer-input
          />
          <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>

        <button class="search-bar__submit search-form__submit"
          type="submit"
          data-search-form-submit>
          {% include 'icon-search' %}
          <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
        </button>
      </form>

      <div class="search-bar__actions">
        <button type="button" class="btn--link search-bar__close js-drawer-close">
          {% include 'icon-close' %}
          <span class="icon__fallback-text">{{ 'general.search.close' | t }}</span>
        </button>
      </div>
    </div>
  </div>
</div>


Hope u can make something of this. I'm sorry, like I said I am new to this.

Thanks

0 Likes

@NielsSchutte,

2020-02-26_18-06.jpg

Also Go to Assests/theme.js

Search code

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

Replace this with

$(selectors.searchHeaderInput)
      .add(selectors.searchHeaderSubmit)
      .on('focus blur', function() {
      // $(selectors.searchHeader).toggleClass(classes.focus);
      });
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
NielsSchutte
Explorer
167 2 8

Hi,

I've added the code in my search-drawer.liquid however I can't find this section in my theme.js:

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


I can't even find something that looks like it, isnt this updated..? I can add my whole theme.js but its alot, what do you recommend?

0 Likes

@NielsSchutte,

You are using debut theme

2020-02-26_18-33.jpg

Please check it once

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes