Aug 24, 2016

Create Responsive Drop Down Menu with Search Box in Blogger

data:blog.title
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!

5 comments:

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

    ReplyDelete
    Replies
    1. Just checked.
      working perfectly on your blog :)

      Thanks for commemt.

      Keep in touch with us.

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

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

      Delete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.