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

Please note that this tutorial needs updating, due to the restrictions on Blogger the pagination.js file in step 2 below now needs to be hosted directly within your theme and not in an external file.

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 using this tutorial.

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.

Post last updated:

7 responses to “How to create a dropdown search bar in your navigation on Blogger”

  1. Vanessa

    It works great! Thanks so much for sharing this!

  2. Hey, is it possible to add this on the right side of the menu?
    Thank you so much for sharing this with us. XX Mell

    1. Hello. Yes you can use CSS to style this and position it on the right side of the menu.

  3. Your aiticles have always been helpful. Thanks for sharing.
    FestoEmpire.com

  4. Thanks for this great article.
    Please add a demo page in each article. It really helps me see how it works. thank you

  5. Filipa

    This is great! Thank you for sharing! Just one question, if I wanted to have two searchbars on my blog, what do I do then? Thanks!

  6. Hi,

    I really appreciate the hard work that you have put on writing this post and also to create the scripts. Thanks for sharing such cool tips and tutorials.

    B/Rgds

    Krish

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.