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