Venture Theme - Make search box always visible.

Shopify Partner
20 0 0

I have been messing with this for a few days, I was able to make the box stretch further but I can't figure out how to make it always visible instead of having to click the magnifying glass to expand it. .  

Can anyone help? 

 

Thank you. 

0 Likes
Explorer
112 1 23

Hey Peter,

You'll need to edit your header.liquid file. Find the code around line 121 that looks like this:

<div class="site-header__search-inner">
  <label for="SiteNavSearch" class="visually-hidden">{{ 'general.search.placeholder' | t }}</label>
  <input type="search" name="q" id="SiteNavSearch" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="site-header__search-input">

Change it to this:

<div class="site-header__search-inner search-header__search-inner--active">
  <label for="SiteNavSearch" class="visually-hidden">{{ 'general.search.placeholder' | t }}</label>
  <input type="search" name="q" id="SiteNavSearch" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}" class="site-header__search-input site-header__search-input--visible">

Let me know if that works for you. 

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
1 Like
Shopify Partner
20 0 0

awesome thank you very much I'll give this a shot. 

0 Likes
Shopify Partner
20 0 0

worked thank you, but when you click to enter a search once you are done it disapears again.  Any way to get it to stick indefiantly? Also Where do I find the media query to make it responsivly adjust with the resizing of the window? I think I need to add one between what's already there.  It adjusts just not inbetween small and large window.  

0 Likes
Explorer
112 1 23

In theme.js you should see some code around line 2283 that looks like this:

$input.on('focus', function() {
  $searchInner.addClass(config.searchInnerActiveClass);
  $input.addClass(config.searchShowClass);
});

$input.on('blur', function() {
  $searchInner.removeClass(config.searchInnerActiveClass);
  if ($input.val()) {
    $input.addClass(config.searchShowClass);
  } else {
    $input.removeClass(config.searchShowClass);
  }
});

Comment it out. Replace it with this:

// $input.on('focus', function() {
//   $searchInner.addClass(config.searchInnerActiveClass);
//   $input.addClass(config.searchShowClass);
// });

// $input.on('blur', function() {
//   $searchInner.removeClass(config.searchInnerActiveClass);
//   if ($input.val()) {
//     $input.addClass(config.searchShowClass);
//   } else {
//     $input.removeClass(config.searchShowClass);
//   }
// });

That should fix the disappearing issues.

As for the media query, I'm not sure exactly which line it will be, but try looking for the .search-header__search-inner--active class inside theme.scss.css.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Shopify Partner
20 0 0
  function initHeaderSearch() {
    // This function runs after the header search element
    // is duplicated into the sticky nav, meaning there are
    // two search fields to be aware of at this point.
    var $searchForm = $('.site-header__search');

    $searchForm.each(function(i, el) {
      var $form = $(el);
      var $input = $form.find('.' + config.searchInputClass);
      var $submit = $form.find('.' + config.searchSubmitClass);
      var $searchInner = $('.site-header__search-inner');
      
      
      $input.on('focus', function() {
  		 $searchInner.addClass(config.searchInnerActiveClass);
 		 $input.addClass(config.searchShowClass);
 		});

		$input.on('blur', function() {
 		 $searchInner.removeClass(config.searchInnerActiveClass);
   		if ($input.val()) {
    	 $input.addClass(config.searchShowClass);
  		} else {
    	$input.removeClass(config.searchShowClass);
  		}
 		});

     	//$input.on('focus', function() {
       // $searchInner.addClass(config.searchInnerActiveClass);
       // $input.addClass(config.searchShowClass);
     // });

     // $input.on('blur', function() {
      //  $searchInner.removeClass(config.searchInnerActiveClass);
      //  if ($input.val()) {
       //   $input.addClass(config.searchShowClass);
       // } else {
       //   $input.removeClass(config.searchShowClass);
      //  }
    //  });*/
      

      $submit.on('click', function(evt) {
        if ($input.hasClass(config.searchShowClass)) {
          return;
        }

It still disapears.  This is my code section.  Would it have to do with the submit.on fucntion? 

I am trying to learn as I go.  I really apreciate the help and suggestions. 

0 Likes
Explorer
112 1 23

You're close. You have to replace the code, you put my commented code under it instead of replacing it.

Delete this part:

      $input.on('focus', function() {
  		 $searchInner.addClass(config.searchInnerActiveClass);
 		 $input.addClass(config.searchShowClass);
 		});

		$input.on('blur', function() {
 		 $searchInner.removeClass(config.searchInnerActiveClass);
   		if ($input.val()) {
    	 $input.addClass(config.searchShowClass);
  		} else {
    	$input.removeClass(config.searchShowClass);
  		}
 		});

 

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Shopify Partner
20 0 0

the code in your post is the same in both boxes i think.  

0 Likes
Explorer
112 1 23

Let me clarify. The above code you posted should look like this:

  function initHeaderSearch() {
    // This function runs after the header search element
    // is duplicated into the sticky nav, meaning there are
    // two search fields to be aware of at this point.
    var $searchForm = $('.site-header__search');

    $searchForm.each(function(i, el) {
      var $form = $(el);
      var $input = $form.find('.' + config.searchInputClass);
      var $submit = $form.find('.' + config.searchSubmitClass);
      var $searchInner = $('.site-header__search-inner');

      //$input.on('focus', function() {
      // $searchInner.addClass(config.searchInnerActiveClass);
      // $input.addClass(config.searchShowClass);
      // });

      // $input.on('blur', function() {
      //  $searchInner.removeClass(config.searchInnerActiveClass);
      //  if ($input.val()) {
      //   $input.addClass(config.searchShowClass);
      // } else {
      //   $input.removeClass(config.searchShowClass);
      //  }
      //  });*/
      

      $submit.on('click', function(evt) {
        if ($input.hasClass(config.searchShowClass)) {
          return;
        }

You previously had two $input.on('focus', function() { and $input.on('blur', function() { lines. There should only be one of each.

The easiest way to get Shopify help. Submit your task, get a quote, and we'll get the work done. Work with me at shupkeep.com
0 Likes
Shopify Partner
20 0 0

That's my bad I misunderstood.   Thank you so much for being patient and helping. 

 

For anyone reading this and wants to add teh media query.  It is in  theme.scss.liquid around line 2875.  Search for "search-header__search-inner--active". I have added things to my code so it may be a little before of after that number in unedited code. 

0 Likes