Add Responsive Dropdown Menu to Blogger With Social Icons

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 I have shared a responsive menu bar with you you can say that version 1 and this was version 2, after that our some followers request me 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.

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 */
#menutop{height:50px;background:#333;max-width:1000px;margin:0 auto;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:50px;max-width:1000px;margin:0 auto;}
#menutop li{float:left;display:inline;position:relative;font-family:'Open Sans';font-size:12px;font-weight:bold;}
#menutop a{display:block;line-height:50px;padding:0 14px;text-decoration:none;color:#eee;}
#menutop ul li:hover a{color:#8493A0;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:50px;opacity:0;cursor:pointer}
#menutop label{font-family:'Open Sans';font-size:30px;font-weight:400;display:none;width:35px;height:50px;line-height:50px;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:#eee;}
#menutop ul li ul li a{background:#fff;color:#eee;height:50px;line-height:50px;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#444;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);left:0;top:50px;min-width:150px;border-radius:3px;transform-origin:50% 0;-moz-transform:rotateY(0deg) translateZ(200px);-webkit-transform:rotateY(0deg) translateZ(200px);transform:rotateY(0deg) translateZ(200px);-webkit-transition:350ms;-moz-transition:350ms;-o-transition:350ms;transition:350ms;}
#menutop .menux li {display:block;width:100%;}
#menutop ul.menux li a{display:block;width:100%;color:#666;border-bottom:1px solid #f0f0f0;}
#menutop .menux li:last-child a{border-bottom:none;}
#menutop li:hover > ul.menux{visibility:visible;opacity:1;-moz-transform: perspective(400) rotate3d(0,0,0,0);-webkit-transform: perspective(400) rotate3d(0,0,0,0);
transform: perspective(400) rotate3d(0,0,0,0);}
#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:50px;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:50px;position:absolute;top:0;right:10px;}
#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#444;color:#fff;}
#menutop ul li ul li a:hover{background:#fdfdfd;color:#8493A5;}
#menutop li.facebook,#menutop li.googleplus,#menutop li.twitter,#menutop li.youtube{text-align:center;color:#fff;float:right;transition:all 0.2s ease-in-out;}
#menutop .buttonalert {font-size:16px;line-height:50px;color:#8493A0;height:50px;-webkit-transform: translateZ(0);cursor:pointer;position:fixed;top:0;left:30px;z-index:90;transition:all 0.5s ease-in-out;transition-delay:0.2s;}
@media only screen and (max-width:768px){
#menutop{background:#fff;border:1px solid #e9e9e9;}
#menutop li:hover > ul.menux{display:block;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#8493a0;color:#fff!important;}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop li:hover > a.dutt,#menutop a.dutt:hover{background:#8493a0;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:normal;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}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#8493a0;color:#fff;}
}

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.

     <!---Responsive Menu By MBG--><nav id='menutop'><label></label><input type='checkbox'/><ul><li><a href='/' title='Home'>Home</a></li><li><a class='dutt' href='#'>Categories</a><ul class='menux'><li><a href='#'>Blogger Tricks</a></li><li><a href='#'>DRM Removal</a></li><li><a href='#'>Jailbreak</a></li><li><a href='#'>e-Books</a></li><li><a href='#'>Calibre</a></li><li><a href='#'>iTools</a></li></ul></li><li class='li-download'><a href='#'>Downloads</a></li><li><a href='#'>Contact</a></li><li class='li-sitemap'><a href='#'>Sitemap</a></li><li><a class='dutt' href='#'>TOS</a><ul class='menux'><li><a href='#'>Privacy Policy</a></li><li><a href='#'>DRM Removal Policy</a></li></ul></li><li class='sorting-04 youtube'><a href='https://www.youtube.com/#/' rel='nofollow' target='_blank'><i class='fa fa-youtube fa-lg'></i><span class='inv'></span></a></li><li class='sorting-03 googleplus'><a href='https://plus.google.com/+MBG' rel='nofollow' target='_blank'><i class='fa fa-google-plus fa-lg'></i><span class='inv'></span></a></li><li class='sorting-02 twitter'><a href='https://twitter.com/MBG' rel='nofollow' target='_blank'><i class='fa fa-twitter fa-lg'></i><span class='inv'></span></a></li><li class='sorting-01 facebook'><a href='https://www.facebook.com/MBG' rel='nofollow' target='_blank'><i class='fa fa-facebook fa-lg'></i><span class='inv'></span></a></li></ul>

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.
Thank You! Stay Blessed!

Paramjot Singh
 

Hey, How you all are? Myself Paramjot Singh, A young (Not Old :P) addicted Blogger from Lucknow, India who want to learn Aha to Shit of the Blogging. I'm blogging since 2 years, and here on My Blogger Guides, I'm sharing my little mind knowledge which I learned in these past two years. :)