This navigation bar is capable of working on responsive design so, if you have one you will be happy to enjoy that feature right out of the box. Alright, lets see how it is going to be like in the normal desktop view and the mobile layout.
Responsive Blogger Navigation Design
This will not only offer you a solid blogger navigation solution, but it is also designed with integrated social media icons that are responsive as well.
Responsive Drop-Down Menu Design
Drop-down menus are designed very clean and neat for each view whether it is desktop or mobile as you can see from the picture above. It is going to expand just right when the visitor hover by the mouse over the expandable option, all that is done smoothly by the power of CSS3.
Get Navigation Bar Now for Free!
Okay, you can add this beauty to your blogger blog easily by implementing some CSS and HTML codes supported by Font-Awesome toolkit and Jquery. To do this, you are going first to remove your old page-list widget as we are now exchanging it with a custom designed one. Go to your blog's blogger dashboard > layout > Pages (Edit) then click remove so you can get rid of it, you can follow the picture below if you are confused.
After that, you need to place the codes inside your template by clicking on "Edit HTML", and we are going also to replace a certain code with the new HTML code of the new navigation bar. So, on your keyboard, click both "CTRL + F" to find:
<div class='region-inner tabs-inner'>Then, highlight all the code starting from the the line you just searched to the end of its div element which is
</div> and replace it with:<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a class='dutt' href='#'>Drop-Down</a>
<ul class='menux'>
<li><a href='#'>Sub-item 1</a></li>
<li><a href='#'>Sub-item 2</a></li>
</ul>
</li>
<li><a class='dutt' href='/p/get-in-touch.html'>Contact</a>
<ul class='menux'>
<li><a href='#'>e-mail Form</a></li>
<li><a href='#'>Twitter</a></li>
</ul>
</li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>Well, lets add the CSS, Font-Awesome and Jquery API to your template with just one code (below) that you are going to add add before your
</head> end tag.<style>
/* iSmoothBlog CSS Menu Top */
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:"\f0d7";font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}
@media screen and (max-width:960px) {
#menutop,#menutop ul{background:#fff;height:auto}#menutop li,#menutop li:hover>ul.menux{display:block}#menutop{position:relative;border:none;border-bottom:4px solid #999;min-height:50px;margin-bottom:20px}#menutop ul{border:none;position:static;overflow:hidden;display:none;padding-top:50px}#menutop ul.menux{width:100%;position:static;border:none;padding-top:0}#menutop li{float:none;width:auto;text-align:left}#menutop a.dutt{font-weight:700}#menutop a.dutt:hover,#menutop li:hover>a.dutt{background:#b1b1b1;color:#fff}#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0}#menutop input:after,#menutop label:after{content:"\f0c9";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:none;font-size:30px;color:#666;display:inline-block;position:absolute;right:15px;top:25%;line-height:30px}#menutop input{z-index:4}#menutop input:checked+label{color:#fff;font-weight:700}#menutop input:checked~ul{display:block}
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>You are done! save your template now and check your blog for the results. However, these instructions are given to you assuming you are using an official blogger template. If you are using custom one, you have to figure it out by replacing your old navigation bar with this one.
What do you like about this this navigation bar? Please let me know what do you think, and if you have any questions or need any help, do not hesitate to post in the comment section below.
