Sep 4, 2016

Mobile Responsive Drop Down Menu Bar for Blogger

data:blog.title
In previous we have shared many responsive drop down menu bars which are also compatible with mobiles. Today we are here with another design of responsive drop down menu bar for blogspot user. We hope you all will like it. Below we are going to attach a live demo screenshot and live demo link button. So before adding see live demo or here in screenshot as you want.

Drop Down Menu Bar, Responsive Navigation Bar

Live Demo

Below screenshot we have taken using our personal android phone for give you an idea how it looks like and how it works.  The menu bar auto adjustable according the screen resolutions because it is well coded by using media queries.

Mobile Responsive Menu, Drop Down Navigation Bar

We hope you like this navigation bar by seeing the above screenshot or live demo of this widget. As we have mentioned in our previous articles the most important element of every blog is navigation bar. Usually every blog have navigation bars but some are not responsive and some are not attractive and stylish. So for this need we are here to introduce an impressive drop down menu bar for blogger users.

Also Read : Create A Fixed Responsive Drop-Down Menu Bar with Search Box in Blogger.

Also Read : Android Apps Like Sliding Menu Bar for Blogger - Responsive Version.

Did you like it? Do you want to add it on your blogger blog? Okay but before adding it here are some features of this navigation bar so first read them before add it on your blog.

Features Of Navigation Bar


  1. Fully Responsive.
  2. Neat & Clean.
  3. No Use of any jQuery Script.
  4. Fast to Load.
  5. Nice hover effect.
  6. Nice color combination.
  7. Drop Down Function when someone click on menu bar.

We think these are enough to impress a reader. We hope now you want to add it on your blogger blog. Okay now lets get straight to work.

How To Add Responsive Drop Down Menu Bar to Blogger?


STEP1] As usual Go To Blogger.com >> Click On Template >> Backup/Restore your Template. (Highly Recommended)

STEP2] By Using CTRL+F search for below or similar lines. These lines you can find on the top section of your blogger template code area.

<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>

STEP3] Now replace above lines 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'/>

STEP4] Click on Edit HTML button >> By pressing CTRL+F search for </head> tag and paste below code just above of </head> tag.

Note: You don't have permission to share our codes on your blog. Stay away from it. Respect the har work of developers please.
 <style type='text/css'>
@import url(http://fonts.googleapis.com/css?family=roboto);
 .toggle, [id^=drop] {
 display: none;
}
nav {
  margin: 0;
  padding: 0;
  background-color: #ff0091;
}
nav:after {
  content: "";
  display: table;
  clear: both;
}
nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
  background-color: #ff0091;
}
nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}
nav ul li ul li:hover { background: #000000; }
nav a:hover { background-color: #000000; }
nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}
nav ul ul ul li {
  position: relative;
  top: -60px;
  left: 170px;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
nav { margin: 0; }
.toggle + a,
 .menu { display: none; }
.toggle {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
  border: none;
}
.toggle:hover { background-color: #000000; }
[id^=drop]:checked + ul { display: block; }
nav ul li {
  display: block;
  width: 100%;
}
nav ul ul .toggle,
 nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover,
 nav ul ul ul a { background-color: #ff0091; }
nav ul li  {background:#222;}
nav ul li ul li .toggle,
nav ul ul a { background-color: #212121; }
nav ul ul {
  float: none;
  position: static;
  color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
  display: block;
  width: 100%;
}
nav ul ul ul li { position: static;
}
}
@media all and (max-width : 330px) {
nav ul li {
  display: block;
  width: 94%;
}
}
</style>

STEP5] Now search for <body> tag and just below of it paste below HTML Code of this navigation bar.

<nav>
  <label for="drop" class="toggle">Menu</label>
  <input type="checkbox" id="drop" />
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li>
      <!-- First Tier Drop Down -->
      <label for="drop-1" class="toggle">Service +</label>
      <a href="#">Service</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li>
     
      <!-- First Tier Drop Down -->
      <label for="drop-2" class="toggle">Portfolio +</label>
      <a href="#">Portfolio</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Portfolio 1</a></li>
        <li><a href="#">Portfolio 2</a></li>
        <li>
         
          <!-- Second Tier Drop Down -->
          <label for="drop-3" class="toggle">Works +</label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>
STEP6] Now change all # with your links and text which you want.

STEP7] After all above process click on Save Template button.

Now open your blog to see it live on your blogspot blog. If any case you are facing problem with this widget then you can ask us via dropping a comment below.

Did you like it? Give us your feedback via using comment box. Your opinions and suggestion are always welcome.

Also Read : Add Stylish Contact to Static Page on Blogger.

Conclusion:

So above guide is about How To Add Mobile Responsive Drop Down Menu Bar to Blogger Blog? We tried our best to make tutorial easy as much as possible. If anyhow problem persist after following all above steps then let us know via dropping a comment below. We will help you out of sure. Do Share and Subscribe Us.
Thank You! Stay Blessed!

No comments:

Post a Comment

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.