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

In a previous tutorial I have shared a collection of beautiful vertical navigation menu bar with you, after that our some followers request me that how to add a responsive menu in in blogger. After the request of these friends, today I bring a multi-level responsive menu and we are going to add in a blogger blog. Actually a responsive menu is a bar which adjusting with screen width, if a visitor visit your blog through desktop, then it looks like a traditional menu bar, but when someone access to your blog through a smart phone or tablet then it looks as a mobile application. In these the using of smart phones and tablets increasing day by day. You would be noticed that many visitors are accessing to your blog through mobile phones. So this utmost necessary to make your blog mobile friendly.

Live Demo

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

This is not an uphill task to add this menu in your blog, follow the instructions.

1. Login your blogger account and select a blog which you want to add this menu.

2. Select template >> edit HTML.

3. After opening your template all coding, search <head> and paste the below links.

<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='https://googledrive.com/host/BzPgmXeCwsMRc0o1NnM4QU1OSVE' type='text/javascript'></script>

Adding CSS codes

First of all, click on below 'view code' and copy all css code from appearing pop up window then search ]]></b:skin> in your blog template and paste just above it.

View Code

Adding HTML codes

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

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>
<ul class="menu">
<li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
</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></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>
</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>
</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> <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="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li></ul></nav>

Replace the # with your blog links and anchor text with your own. 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
Select No. Show desktop template on mobile devices.

Now check your blog with different devices. Hopefully it will be working properly, if you are facing any problem about adding this multi-level responsive menu bar then leave your comment below.

Live Demo