Wednesday , February 22 2017

Create Responsive Dropdown Menu bar in Blogger

In the previous post, I have shared a collection of the beautiful vertical navigation menu bar. In the response of our some readers’ request, in this post, I want to share with you a multi-level responsive menu and we also will learn in this post how to add it to a blogger blog. A responsive menu is the modern type of the navigation bar which may not be same all devices, it has special codes to resize with the user platform width whenever necessary. If a visitor visits your blog through desktop, then it looks like a traditional menu, but when someone access to your blog through a smartphone or tablet then it looks as a mobile application. As we know the using of mobiles & tablets are increasing day by day. You would be noticed that many visitors are accessing to your blog through mobile phones. So this very important to make your blog mobile friendly.

Responsive Dropdown Menu bar in Blogger

Live Demo

How to add multi-level responsive navigation menu bar in blogger

To create a responsive menu in blogger, you will need to add the following HTML, CSS and jQuery into your blog. How to add the following code in your blog, simply follow the below simple steps.

  • Login your blogger account and select a blog which you want to add this responsive menu.
  • Go to template >> edit HTML.
  • After opening your blog template all coding, search <head> and paste the below links just above it.
<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='http://codepen.io/thebloggerguide/pen/GjLRkY.js' type='text/javascript'></script>

Adding CSS code

After the completion of above step, now you need to add the below CSS code to your blog. To add this, first of all click on view code button and copy the all CSS code and then search ]]></b:skin> in your blog template and paste the copied code just above it.

Add HTML code

Adding HTML to your blog depend on you, where you want to appear menu in your blog. If you want to appear after the header, then find </header> tag and paste the below codes just below it.

<nav>
<a class="responsive-menu" href="#" id="resp-menu"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a></li>
<li><a href="#">Sub-Menu 3</a></li>
<li><a href="#">Sub-Menu 4</a></li>
<li><a href="#">Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-user"></i> ABOUT</a></li>
<li><a href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
<li><a href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu 2</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
<li><a href="#">Sub-Menu 3</a>
    <ul>
<li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
<li><a href="#">Sub Sub-Menu 3</a></li>
<li><a href="#">Sub Sub-Menu 4</a></li>
<li><a href="#">Sub Sub-Menu 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
<li><a href="http://www.thebloggerguide.com/"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER </a></li>
</ul>
</nav>

Replace the # with your blog’s links and anchor text with your own anchor text. Now click on save template bottom. You have almost done.
Remember

  • If you are using the blogger mobile version template in your blog, first disable it by going. Select template >> click the gear icon & check on No. Show desktop template on mobile devices.
  • screanshot

Now view your blog with different devices. Hopefully, it will be working properly, if you are facing any problem about the adding  multi-level responsive menu bar in blogger then share with us in the comment section.

Check Also

5 Attractive CSS Drop Down Menu for Blogger

The navigation menu bar is an important part of every blog and website. Where visitors …

8 comments

  1. Hi ,nice menu.
    I use it with my test blog and it works only in desctop.In mobile mode, menu didnt work.
    http://test-ntsotsos.blogspot.gr/
    Any idea why?

  2. Hi Wahab!
    Really awesome menu i was looking for that thanks a lot that you shared
    keep it up bro, nice affort

  3. ” view code link is not working

  4. Extremely valuable tips…I will also follow them on my blog and see how it can help me. Thanks a lot!

  5. Nice article, this is the first one that works fine for me — question: how can I manage the menu icons (remove, add, check others…)?

  6. Awesome thoughts and i really appriciate your work keep it up.

Leave a Reply

Your email address will not be published. Required fields are marked *