How to create a dropdown search bar in your navigation on Blogger

Today’s tutorial is showing you how to add a search icon to your navigation menu that when clicked will display a search box. The search bar will slide down allowing your visitors to search for blog posts (there’s a similar example on this site).

How to create a drop down search box in your navigation on blogger

How to create a dropdown search bar in your navigation on Blogger

1. Since we’ll be using a Font Awesome icon in this tutorial, we need to first install Font Awesome.

Go to the get started page and enter your email. They’ll send you an embed code similar to the following, place it above the closing head tag, </head>, in your template (Theme > Edit HTML).

<script src="https://use.fontawesome.com/0000aa000a.js"></script>

</head>

2. Next, we’ll add the search icon to your navigation menu. Find the custom menu you’ve created, for this tutorial I’ll be using the menu we created in this post with the navigationbar ID (as we’ve added id='navigationbar' to the parent div). If you’re using a different menu, you’ll need to find this parent ID for step 4.

Add the following before the closing </ul> tag in your navigation menu.

<li class="searchicon" id="searchicon"><i class="fa fa-search"></i></li>

create a drop down search box on blogger

3. Within the navigation div but underneath the menu list you’ve created, you’re going to paste the following

<div class='clear' id='searchbar'>
<form expr:action='data:blog.searchUrl' id='searchform' method='get'>
<input id='searchBox' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search...' vinput=''/> <input id='searchButton' type='submit' value='Go'/>
</form>
</div>

4. Now let’s add the CSS to style the menu, this is some basic styling but you can customise it to suit your blog. This CSS will go above the closing style tag, which is </b:skin> on Blogger.

/* Start dropdown navigation - XOmisse */
#searchbar {
  display: none;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  height: 50px;
  background: #fff;
  position: absolute;
  overflow: hidden;
  z-index: 9999;
}

#searchicon {
  height: 30px;
  line-height: 30px;
  width: 30px;
  color: #333;
  text-align: center;
  float: right;
  cursor: pointer;
}

#searchicon:hover {
  color: #999999;
}

#searchBox {
-webkit-appearance: none;
border: 0px;
background: #FFF;
padding: 10px;
text-transform: uppercase;
width: 80%;
}

#searchButton {
  width: 10%;
  padding: 10px 20px;
  background: #333333;
  color: #ffffff;
  border: 0;
  outline: none;
  cursor: pointer;
}
/* End dropdown navigation - XOmisse */

create a drop down search box on blogger

5. Right above the closing body tag </body>, paste the following and save your theme.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
  var $searchicon = $('#searchicon i');
  var $searchbar  = $('#searchbar');
  
  $('#navigationbar ul li').on('click', function(e){ 
    if($(this).attr('id') == 'searchicon') {
      if(!$searchbar.is(":visible")) { 
        // if invisible we switch the icon to appear collapsable
        $searchicon.removeClass('fa-search').addClass('fa-search-minus');
      } 
        else {
        // if visible we switch the icon to appear as a toggle
        $searchicon.removeClass('fa-search-minus').addClass('fa-search');
      }
      
      $searchbar.slideToggle(300, function(){
        // callback after search bar animation
      });
    }
  });
  
  $('#searchform').submit(function(e){
    e.preventDefault(); // stop form submission
  });
});
</script>

Now, when you click the search icon the box should slide down. If it’s not working, double check that there are no errors in your template and no jquery conflicts.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

4 comments