Oct 29, 2015

Design Responsive Dropdown Menu Bar for Blogger [V3]

data:blog.title
Wanna Create Responsive Drop Down  Menu Bar For Blogger Blog and wondering How To Add Responsive Dropdown Menu In Blogger With Social Icons? Guys, 'Don't Worry' Today we are here with a good looking responsive dropdown menu bar for your blogger blog.

create responsive dropdown menu bar for blogger

In a previous tutorial We have shared two responsive menu bar with you & you can say that version 1, version 2 and this is version 3.
This Menu Bar is Fully Responsive With Green color an hope you lie this. Once check it from Demo link which is given Below. Our some followers request us that share more responsive menu bars for blogger blog After the request of these friends, today I bring a another responsive menu which is drop down and we are going to add in a blogger blog.

I am pretty sure that every blogger using blogger.com platform is asking for this feature, I have read it everywhere inside blogger's official page in Google+ social network. If you want your navigation bar to have a drop-down menu then you must exchange it with a whole new custom one.


Check Live Demo Here

What Is Responsive Dropdown Menu Bar?

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.



See Also Another Stylish Widget

  1. Stylish Contact Form for Blogger! Add to Static Page.
  2. Stylish Popup Subscription Box for Blogger.
  3. WordPress Like Floating Social Sharing Counter Buttons for Blogger.
 

How to add 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 this tag -  ]]></b:skin>  and paste below codes just above of this tag.
/* MBG CSS Responsive Menu */
#navi-mbg{height:30px;text-transform:uppercase;font-size:100%;background:#1A7C62;color:#FFF;font-family:Oswald;margin:0 15px}#navi-mbg ul.menus{background:#1A7C62;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}#navi-mbg a{display:block;line-height:30px;padding:0 10px;text-decoration:none;color:#FFF}#navi-mbg ul,#navi-mbg li{margin:0 auto;padding:0;list-style:none}#navi-mbg ul{height:30px;max-width:835px}#navi-mbg li{float:left;display:inline;position:relative}#navi-mbg input{display:none;margin:0;padding:0;width:80px;height:30px;opacity:0;cursor:pointer}#navi-mbg label{display:none;width:35px;height:31px;line-height:31px;text-align:center}#navi-mbg label span{font-size:16px;position:absolute;left:35px}#navi-mbg ul.menus li{display:block;width:100%;text-transform:none;text-shadow:none;border-bottom:1px dashed #31AFDB}#navi-mbg ul.menus a{color:#FFF;line-height:35px}#navi-mbg li a:hover{background:#0F5341}#navi-mbg li:hover ul.menus{display:block}#navi-mbg ul.menus a:hover{background:#5FC6EB;color:#FFF}#navi-mbg li ul{background:#0F5341;margin:0;width:150px;height:auto;position:absolute;top:30px;left:0;z-index:10;display:none;border-bottom:3px solid #16a085}#navi-mbg li li{display:block;float:none}#navi-mbg li li:hover{background:#1A7C62}#navi-mbg li li a:hover{background:#1A7C62}#navi-mbg li:hover > ul{display:block}#navi-mbg li ul ul{left:100%;top:0}#navi-mbg li li > a{display:block;padding:0 10px;margin:0;line-height:24px;text-decoration:none;color:#fff;border-bottom:1px dotted #777}@media screen and (max-width: 800px){#navi-mbg{position:relative}#navi-mbg ul{background:#1A7C62;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}#navi-mbg ul.menus{width:100%;position:static;padding-left:20px}#navi-mbg li{display:block;float:none;width:auto}#navi-mbg input,#navi-mbg label{position:absolute;top:0;right:0;display:block}#navi-mbg input{z-index:4}#navi-mbg input:checked + label{color:#fff}#navi-mbg input:checked ~ ul{display:block; width: 100%}#navi-mbg li:hover > ul{width:100%}}.quickedit{display:none}

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 id="navi-mbg"><input type="checkbox" /><label><i class="fa fa-bars"></i></label><ul><li><a href="/">Home</a></li><li><a href="#">Flash Files</a><ul><li><a href="#">Samsung</a></li><li><a href="#">Nokia</a></li><li><a href="#">Android</a></li><li><a href="#">Windows</a></li></ul></li><li><a href="#">Flashing Box</a><ul><li><a href="#">Phoenix Service Software</a></li><li><a href="#">Avator Box</a></li><li><a href="#">Miracle Box</a></li><li><a href="#">Z3x Samsung Box</a></li><li><a href="#">MxKey Hti Box</a></li><li><a href="#">Volcano Box</a></li><li><a href="#">Other</a></li></ul></li><li><a href="#">Mobile Tools</a><ul><li><a href="#">Android Multi Tools</a></li><li><a href="#">Chimera Tool</a></li><li><a a="" href="#"></a></li><li><a a="" href="#"></a></li></ul></li><li><a href="#">Pc Suites</a><ul><li><a href="#">Samsung</a></li><li><a href="#">Nokia</a></li><li><a href="#">QMobile</a></li>
</ul></li><li><a href="#">Mobile Repairing</a></li><li><a href="#">Android</a><ul><li><a href="#">Apps</a></li><li><a href="#">Games</a></li><li><a href="#">Wallpapers</a></li><li><a href="#">Reviews</a></li></ul></li><li><a href="#">Usb Drivers</a></li></ul></nav>




Replace the # with your blog links and anchor text with your own and yellow highlighted links with your social profiles. That's it.


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.


Conclusion:

So above guide is about How To Add Responsive Dropdown Menu In Blogger With Social Icons. Now check your blog with different devices. Hopefully it will be working properly, if you are facing any problem about adding this responsive menu bar then leave your comment below. Give your feedback by comment below. Do share.

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.