Hide and Show Search Bar

How to edit the Search Bar.

1. Open Theme.liquid and add the following code before the closing </script>  tag.

//start search bar visibility implementation
$(".search-form").hide();
$('.search-toggle').on('click', function(e){
 e.preventDefault();
 $(this).fadeIn(500, function() {
 if($('.search-form').css('display') === "none"){
 $('.search-form').fadeIn(500); 
 } 
 else if ($('.search-form').css('display') === "block"){
 $('.search-form').fadeOut(500);
 }
 });
}); 

2. Open search-form.liquid and replace all of the code with the following:

{% if settings.search-placement != 'sidebar' %}
<li><a href="#" class="search-toggle"><i class="fa fa-search"></i></a></li>
{% endif %}
<form {% if settings.search-placement != 'sidebar' %}class="search-form navbar-form"{% endif %} action="/search">
  <div class="input-group">
    <input type="search" name="q" class="form-control search-bar" autocomplete="off" placeholder="{{ 'navigation.search.search-form-placeholder' | t }}" value="{{ search.terms }}">
    <span class="input-group-btn">
      <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
    </span>
  </div>
</form>

3. Open the custom CSS settings from the Dashboard and add the following code:

form.search-form.navbar-form { 
 position: absolute; 
 top: 50px;
 right: 1em;
}

Adjust the top and right to values to fit the theme.

4. At the mobile breakpoint, the search bar moves below the drop down menu. so to compensate at the following code:

@media screen and (max-width: XXXpx){
	form.search-form.navbar-form {
	  position: relative !important;
	  top: 0 !important;
	}
}

Replace "XXXpx" with the breakpoint value from the layout panel. Final Result: