Create Responsive Drop Down Menu with Search Box in Blogger

Hey guys, Hope you all are fine and enjoying your life with blogging. We have already shared 4 responsive drop down menu bar for blogger in October, 2015. Today, we are once again with another responsive drop down menu bar for blogger with search box.

Responsive Menu for Blogger, Responsive Navigation Bar, Drop Down Menu Bar

Actually, This responsive drop down menu bar we have designed for our recently published blogger template “Viral Grid-Mag Blogger Template” and this blogger template is our one of the best blogger template till now. Have a look on it. We are damn sure you can’t ignore it due to its attractive look.

A menu bar is most wanted element of every website/Blog because this is controller of whole website which contains drop down menu links. As usually everyone has navigation bar on their websites but if we don’t have well designed menu bar on our blog then it will reduce your traffic and also affect search engine traffic. So, we highly recommend everyone to use some unique design for their blog’s navigation bar.

Also Read: Another Stylish Below Post Email Subscribe Box for Blogger.  
Also Read: BlackReen Free Blogger Theme – A Responsive Blogger Template.
Also Read: Viral Grid-Mag Responsive Blogger Template – Free & Professional Version. 

The screenshot below taken using my personal smartphone to give you an idea how it looks like and how it works on mobile phones. The Menu bar auto adjust according to the screen resolution because it is well designed by CSS3 media queries coding. Have a look on below screenshot.

Responsive Menu Bar, Mobile Responsive Blogger Menu, Mobile Responsive Navigation Bar, Search Box Menu for Blogger

Live Demo

Tip: If you are using Desktop computer then simply increase and decrease your browser window manually using your mouse and observe how menu toggles between two different styles and expands/collapses when clicked.

Now we are going to explaining the whole tutorial about adding this menu bar to blogger blog. Follow all instruction below.

How To Add Responsive Drop-Down Menu bar in Blogger?

  • Go To Blogger >> Template >> Backup your Template >> Click On Edit HTML.
  • Search for these lines or similar. These lines of code exist at the top section of your template

 <b:if cond=’data:blog.isMobile’> <meta content=’width=device-width, initial-scale=1.0, user-scalable=0′ name=’viewport’/> <b:else/> <meta content=’width=1100′ name=’viewport’/> </b:if>

  • Replace all the above code with our custom Meta ViewPort code which is given below.

<meta content=’width=device-width, initial-scale=1, maximum-scale=1′ name=’viewport’/> <meta content=’text/html; charset=UTF-8′ http-equiv=’Content-Type’/>

  • Now, Search for ]]></b:skin> tag and paste whole CSS part just above of it which is given below.

 /***********************************************
Responsive DropDown Menu by MyBloggerGuides.com
************************************************/
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:5px solid #111;
left: 0;
top:0;
position:fixed;
width: 100%;
transition: top .5s ease-out;
background: #0c6aff;
height:59px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #0c6aff;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #0c6aff;
color:#FF0000;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #0c6aff;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
@media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: “2630”;
font-weight: normal;
}
a.menu-link.active:after {
content: “2715”;
}
.menu {
clear: both;
min-width: inherit;
float: none;
  top:0px;
  position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {
content: ‘+’;
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: “-“;
}
.menu ul ul > li a {
background:#0c6aff;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}

.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
  right:2px;
}
.search_box input {
width: 50%;
  float:left;
}
.search_box input.search_icon {
width: 30%;
  float:right;
  margin-right:14px;
  margin-top:-37px;
}
}

  • Now, Search for <body> tag and just below of it paste following code.

    <!– Sticky-Menu-Start –>
       <div class=’nav_wrapper’>
    <!–<a class=”menu-link” href=”#menu”></a>–>
    <div class=’ct-wrapper’>
     <div class=’spinner-master’>
      <input id=’spinner-form’ type=’checkbox’/>
      <label class=’spinner-spin’ for=’spinner-form’>
        <div class=’spinner diagonal part-1’/>
        <div class=’spinner horizontal’/>
        <div class=’spinner diagonal part-2’/>
      </label>
    </div>
      <a class=’btn’ href=’#search_box’ id=’search’><i class=’fa fa-search’/></a>
    <nav class=’menu’ id=’menu’>
     <ul class=’dropdown’>
       <li><a href=’/’ title=’Link’><i aria-hidden=’true’ class=’fa fa-home’/> Home</a></li>
      
       <li><a href=’#’ title=’Link’>DropDown A</a>
    <ul>
    <li><a href=’#’ title=’Link’>Dopdown 1</a></li>
       <li><a href=’#’ title=’Link’>Dopdown 2</a></li>
      <li><a href=’#’ title=’Link’>Dopdown 3</a></li>
         </ul>
    </li>
      <li><a href=’#’ title=’Link’>DropDown B</a>
    <ul>
    <li><a href=’#’ title=’Link’>Dopdown 1</a></li>
       <li><a href=’#’ title=’Link’>Dopdown 2</a></li>
      <li><a href=’#’ title=’Link’>Dopdown 3</a></li>
         </ul>
      </li>
       <li><a href=’#’ title=’Link’> DropDown C</a>
    <ul>
    <li><a href=’#’ title=’Link’>Dopdown 1</a></li>
       <li><a href=’#’ title=’Link’>Dopdown 2</a></li>
      <li><a href=’#’ title=’Link’>Dopdown 3</a></li>
         </ul>
      </li>
      </ul>
      </nav>
    <form action=’/search’ class=’search_box’ id=’search_box’> <input name=’q’ placeholder=’Search here’ type=’text’ value=”/> <input class=’search_icon’ type=’submit’ value=’Search’/> </form>
    </div><!– /ct-wrapper –>
        </div><!– /sub-nav-menu –>
    <!– /Sticky-Menu-Ends –> 

    Customization:

    We are damn sure you know very well how to add a drop down menu list in this menu bar if we are wrong than to create a tab for a drop down list use the following format:

    <li>
    <a href=’#’>Drop Down </a>
     <ul>
    <li><a href=’#’>Drop Down 1</a></li>
    <li><a href=’#’>Drop Down 2</a></li>
    </ul>
    </li>

    • Now, search for <head> tag and paste below lines just below of <head> tag.

     <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type=’text/javascript’/>
    <link href=’http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css’ rel=’stylesheet’/>

    Note: The above code includes source links to jQuery library and FontAwesome icons. If you already using anyone of it then you may avoid adding their respective source links. 

    • Now, again search for </body> tag and paste following script code just above of it.

    <script type=’text/javascript’>
    $(&quot;ul li:has(ul)&quot;).addClass(&quot;has-submenu&quot;);
    $(&quot;ul li ul&quot;).addClass(&quot;sub-menu&quot;);
    $(&quot;ul.dropdown li&quot;).hover(function() {
      $(this).addClass(&quot;hover&quot;)
    }, function() {
      $(this).removeClass(&quot;hover&quot;)
    });
    var $menu = $(&quot;#menu&quot;),
      $menulink = $(&quot;#spinner-form&quot;),
      $search = $(&quot;#search&quot;),
      $search_box = $(&quot;.search_box&quot;),
      $menuTrigger = $(&quot;.has-submenu &gt; a&quot;);
    $menulink.click(function(e) {
      $menulink.toggleClass(&quot;active&quot;);
      $menu.toggleClass(&quot;active&quot;);
      if ($search.hasClass(&quot;active&quot;)) {
        $(&quot;.menu.active&quot;).css(&quot;padding-top&quot;, &quot;50px&quot;)
      }
    });
    $search.click(function(e) {
      e.preventDefault();
      $search_box.toggleClass(&quot;active&quot;)
    });
    $menuTrigger.click(function(e) {
      e.preventDefault();
      var t = $(this);
      t.toggleClass(&quot;active&quot;).next(&quot;ul&quot;).toggleClass(&quot;active&quot;)
    })
    </script>

    • Now, Click on save template. That’s it.

    Also Read: How To Add Stylish Email Subscription To Each Post’s Footer in Blogger?
    Also Read: Add Jumbo Social Sharing Counter Widget to Blogger
    Also Read: Stylish Contact Form for Blogger Static Pages. 

      Conclusion:

      So above guide is about “How To Create A Responsive Drop Dow Menu with Search Box in Blogger?” We hope you will like it.If anyhow problem persist after following all above steps then drop a comment below. We will help you out of sure. Do Share and Subscribe.
      Thank You! Stay Blessed!
      Paramjot Singh
       

      Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I’m blogging since 2 years, and here on My Blogger Guides, I’m sharing my little mind knowledge which I learned in these past two years. :)

      Click Here to Leave a Comment Below 5 comments
      مداد الجليد - August 24, 2016

      Very happy with this tool on my blog: http://www.madad2.com
      Thank you

      Reply
        mbg - August 25, 2016

        Just checked.
        working perfectly on your blog 🙂

        Thanks for commemt.

        Keep in touch with us.

        Reply
      Precious Anya - August 25, 2016

      Love the way your headings is formatted please what heading tag do you use on your post??? Only h1 ???

      Reply
        mbg - August 25, 2016

        We're using Heading (h2), Sub Heading (h3) and Minor Heading (h4) styles and also using h5 in some of our articles.

        Reply
      Precious Anya - August 25, 2016

      thanks bro

      Reply

      Leave a Reply:

      0 Shares
      +1
      Pin
      Tweet
      Stumble
      Share
      Share