debate Keep search box open

New Member
11 0 0

Hello Guys,

 

Maybe someone can help me.

 

I need to keep the search box open on debute.

Right now it needs to be clicked to open up but I just want it to stay open at all times.

 

I attached the images of my website and the website that I like.

 

My website is PAbyV the one with redd announcement bar

 

If I could make my header look like that that would be amazing.

 

Screen Shot 2019-11-06 at 3.36.34 PM.pngScreen Shot 2019-11-06 at 3.33.50 PM.pngScreen Shot 2019-11-06 at 3.32.32 PM.pngScreen Shot 2019-11-06 at 3.32.13 PM.png

0 Likes

If you want to open search box Then Please do below steps.

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

your Previous code is

<form action="/search" method="get" class="search-header search" 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 site-header__icon" type="submit">
    {% include 'icon-search' %}
    <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
  </button>
</form>

Replace this code with below code(Add "search--focus")

<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 site-header__icon" type="submit">
    {% include 'icon-search' %}
    <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
  </button>
</form>

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

Your Previous code is

    $(selectors.searchHeaderInput)
      .add(selectors.searchHeaderSubmit)
    .on('focus blur', function() {
       $(selectors.searchHeader).toggleClass(classes.focus);
     });
//
    //$(selectors.siteHeaderSearchToggle).on('click', function() {
      //var searchHeight = $(selectors.siteHeader).outerHeight();
      //var searchOffset = $(selectors.siteHeader).offset().top - searchHeight;
//
    //  $(selectors.searchDrawer).css({
     //   height: searchHeight + 'px',
     //   top: searchOffset + 'px'
     // });
  //  });
  }

Replace this code with(Comment ".on('focus blur', function() {}")

 $(selectors.searchHeaderInput)
      .add(selectors.searchHeaderSubmit)
     // .on('focus blur', function() {
      //  $(selectors.searchHeader).toggleClass(classes.focus);
     // });
//
    //$(selectors.siteHeaderSearchToggle).on('click', function() {
      //var searchHeight = $(selectors.siteHeader).outerHeight();
      //var searchOffset = $(selectors.siteHeader).offset().top - searchHeight;
//
    //  $(selectors.searchDrawer).css({
     //   height: searchHeight + 'px',
     //   top: searchOffset + 'px'
     // });
  //  });
  }

Now your searchbox will always be displayed. 

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
11 0 0

@oscprofessional wrote:

If you want to open search box Then Please do below steps.

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

your Previous code is

<form action="/search" method="get" class="search-header search" 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 site-header__icon" type="submit">
    {% include 'icon-search' %}
    <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
  </button>
</form>

Replace this code with below code(Add "search--focus")

<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 site-header__icon" type="submit">
    {% include 'icon-search' %}
    <span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
  </button>
</form>

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

Your Previous code is

    $(selectors.searchHeaderInput)
      .add(selectors.searchHeaderSubmit)
    .on('focus blur', function() {
       $(selectors.searchHeader).toggleClass(classes.focus);
     });
//
    //$(selectors.siteHeaderSearchToggle).on('click', function() {
      //var searchHeight = $(selectors.siteHeader).outerHeight();
      //var searchOffset = $(selectors.siteHeader).offset().top - searchHeight;
//
    //  $(selectors.searchDrawer).css({
     //   height: searchHeight + 'px',
     //   top: searchOffset + 'px'
     // });
  //  });
  }

Replace this code with(Comment ".on('focus blur', function() {}")

 $(selectors.searchHeaderInput)
      .add(selectors.searchHeaderSubmit)
     // .on('focus blur', function() {
      //  $(selectors.searchHeader).toggleClass(classes.focus);
     // });
//
    //$(selectors.siteHeaderSearchToggle).on('click', function() {
      //var searchHeight = $(selectors.siteHeader).outerHeight();
      //var searchOffset = $(selectors.siteHeader).offset().top - searchHeight;
//
    //  $(selectors.searchDrawer).css({
     //   height: searchHeight + 'px',
     //   top: searchOffset + 'px'
     // });
  //  });
  }

Now your searchbox will always be displayed. 




0 Likes
New Member
11 0 0

Hello,

 

Thank you very much for helping with this project.

I am going crazy already.

 

The code did not work :( 

 

I found a way to open up the box and keep it open in a large screen.

I just need it to stay open in all sizes. From desktop to mobile

 

0 Likes