Create a Responsive Drop down Menu in Blogger

Responsive Drop Down Menu in bloggerThe task of Designing a responsive blogger template starts with the Header and the most important part of Header is the top navigation menu that provides useful links to your inner pages. Responsive drop down menus are viral now and can be seen widely implemented on all wordpress blogs and even mashable.com. Today we are releasing the first ever tutorial on designing a flexible Drop down navigation menu for BlogSpot blogs without using a single script or image! The best part is that it is not just a flat menu but with a drop down list. This makes our tutorial distinguished from those several codes and plugins proposed by some Geeky friends at Github. Using simply HTML5 <nav> tags and CSS3 :checked selectors, we managed to design a menu that we hope would be useful to the blogger community because it is really an efficient menu that is compatible with all major browsers and uses no Jquery at all!

The screenshots below are taken using my personal iPhone to give you an idea of how your blog menu would look like in different screen sizes and in landscape and portrait screen mode. The menu auto adjusts itself using CSS3 media queries which we already discussed in first part of this series.

responsive drop down menu in iphone

DEMO

Tip: If you are using Desktop computer then simply increase and decrease your browser window manually using your mouse and observe how menu toggles between two different styles and expands/collapses when clicked.

Tutorial Series
2: Design a Responsive Header, Menu, Sidebar, Post Content area, footer etc...
3: Using Responsive Images in Blogger..
4. Responsive AdSense Ads..  Really?
5. In Progress..

HTML5 and CSS3 is no less than a blessing that has completely eliminated the need of several JavaScript functions.  We will thus Design a beautiful Responsive menu in blogger using some extremely easy steps. Lets start coding!

What have we planned?

For this tutorial to work for most of those who are not well versed in web designing, I suggest you remove all your existing menus and use this responsive one instead which will remain fixed at the top of the screen like a sticky menu. It is really easy to add a menu this way. You can then add all your links inside this new menu.

Disable Mobile Template

Note If you have activated mobile view for your blog then you must first disable it by going to:

  1. Blogger > Template
  2. click the gear icon
  3. Select No. Show desktop template on mobile devices.
  4. Save

Add a Responsive Menu To Blogger

  1. Go To blogger > Template
  2. Backup your template
  3. Click Edit HTML
  4. Search for these lines or similar. These lines of code exist at the top section of your template

<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

Replace all the above code with our custom Meta ViewPort code:

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

 

I have also included a UTF-8 character set for using some Special characters instead of images.

   5. Now Search for </b:skin>.  Click the black arrow to expand the code.

compressed blogger stylesheet

   6.  Paste the following Styles just above </b:skin>

/*-----Responsive Drop Down Menu by MBT ----*/

body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;

}


#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{

display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;

}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}

#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

@media screen and (max-width: 800px){

  #menu{position:relative}
  #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
  #menu ul.menus{width:100%;position:static;padding-left:20px}
  #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
  #menu input,#menu label{position:absolute;top:0;left:0;display:block}
  #menu input{z-index:4}
  #menu input:checked + label{color:white}
  #menu input:checked ~ ul{display:block}

}

 

Customization:

  • To change the menu background edit:#50B7DC
  • To change the background color on hover edit: #5FC6EB

   7.  Now search for <body>    Just below it paste the follow code which will create the menu structure:

 

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>My&#160;Blogger&#160;Tricks</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>

</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
       </ul>
    </nav>

Customization:

  • Replace the text My Blogger Tricks with your blog title.
  • To add spaces between words use the unicode &#160;
  • I am sure you know how to create new tabs but to create a tab for a drop down list use the following format:

Paste the following code below <ul> or above </ul> to create a drop down list:

<li><a href='#'>Drop Down <font size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>

</ul>
</li>

The above menu will create only one drop down list and not multi-level drop down lists because it makes no sense to complicate the design layout for mobile devices. Keeping it simple is best.

  8.  finally save your template and you are all done!

Now play with your browser window and adjust its size manually to see it working just perfectly! :)

Need help?

In the above example, the Main Menu is automatically set to display:none when the screen size width is below or equal to 800px . I used checkboxes to introduces the toggle effect. So as soon as the screen size reaches 800px or further decreases, the CSS media queries detects it and automatically set the mode of the box to checked and apply the styles. This is an interesting technique that we utilized here which eliminated the need for JQuery toggle function.

I have used only two major break points and that is width:1024px  for Desktop computer Screens and 800px for devices which include Tablets, ipads and smart phones. So the entire concept is made extremely easy. I am sure those who understood the above tutorial will find it really interesting to customize it further and add further elements to the menu like a responsive search box at right corner or a RSS Icon etc.

Please let me know if you want any help here. I hope this technique would further help developers to create more interesting blogger templates and contribute further to the blogosphere community. I would love to hear your feedback on this. Please let us know of your precious views so that we could improve it further if needed. Peace and blessings buddies :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

70 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Really helpful tutorial. As responsiveness is very important in blog layout. Responsive navigation will help us to maintain it. Thanks a lot Mohammad bro for this tutorial.

    ReplyDelete
  2. Thanks for sharing, I really like your blog..

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Awesome naivgation menu brother. Keep posting great things.

    ReplyDelete
  5. This is really an interesting navigation menu. we like that SIr.. Great Job thumbing To MBT.

    ReplyDelete
  6. Great blogger!
    Nice and looks user friendly and loads fast on blogger blogspot...

    ReplyDelete
  7. Great tutorial for bloggers. These tips are really very helpful and i will definitely apply them on my blogs. :)

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Hi vector,

      I guess your comment got deleted because it contained link.

      Vector could you please re post your question?

      Delete
  10. Hi lovedx,
    sharing content is indeed something we love as long as you rewrite the post in your own words and attach credits back to this page as the only favor in return. Remember giving external link is good SEO habit and those who remain greedy in attaching credits stay low on SERPs. :)

    ReplyDelete
  11. Hi eric,
    Eric if you can customize its code to make it responsive then it would be great.

    One point to clear here is that responsive layouts are only for providing a better UI to your visitors. It wont make your SEO any better or worse but will only provide a more flexible layout to your visitors who browse your site using mobile devices.

    You can either use this menu or continue using that old one. If you think you have great traffic from mobile devices then you should opt to this one. :)

    ReplyDelete
  12. The best responsie menu thank you bro

    ReplyDelete
    Replies
    1. Hey i have some kind of problems with this menu how can i contact you please do you have skype or something ?

      Delete
  13. Great Tutorial Mohammad. I don't think that Blogger needs to be responsive right now as powerful Google is behind blogger. They have a very strong system to detect all websites browsed through Blogger.

    One more thing, I'll recommend plugins or blogger default mobile view converter as CSS3 is not widely adapted by all browsers (especially IE) and can cause bad user experience if some elements are responsive and others are not.

    Thanks though,
    Mehul

    ReplyDelete
  14. hi..i used blogger template (finalfantasy 6 template) which already menu. How to create/change that menu to become drop down menu?

    ReplyDelete
    Replies
    1. That seems easy bro. Either hook up into your template and replace the code with the above one, or use jquery/javascript to remove your complete menu and add the above with same classes as in that menu so it takes same place on your theme. :)

      Delete
  15. This comment has been removed by the author.

    ReplyDelete
  16. i've searched and still can not find 'body' where should i put it then?

    ReplyDelete
  17. Thanks! This has been super easy to use and edit.

    I have one problem - it won't work in Firefox? Please help!

    ReplyDelete
  18. If i dont disable mobile view..what will happen sir ???
    Sir I wish to have menus with sub-menu'z(which inturn have sub menu???
    what tweaking i have to do for this??
    help me..
    m also having blog-beginner hoping to get help from giants like u :)
    help me sir!! plz

    thanks sir

    ReplyDelete
  19. Is there a way to make this nav bar sit between the banner and actual content of the page, like the default blogger nav bar? Thanks.

    ReplyDelete
  20. Excellent...
    I love this blog :)

    ReplyDelete
  21. Good morning Sir

    I had a problem with this drop down menù in my blog. The blog is http://blogtestfabio.blogspot.com/ and as you can see, I can't show the sub-folders under "Drop Down" label. Could you hel me please to solve this problem?

    ReplyDelete
  22. i dn't kw html... i tried bt i coud't find any thing like < body > wt can i do?

    ReplyDelete
  23. I can't find the < body > and ctrl+F does not work.Please help?

    ReplyDelete
  24. Thanks man! It really helped my site

    ReplyDelete
  25. i cant get it sir something wrong visit my bloh
    tipsbyharsha.blogspot.com

    ReplyDelete
  26. cant get it sir something wrong visit my bloh

    maniadsense.blogspot.in

    ReplyDelete
  27. Thanks a lot..looking for this kind of tutorial. I am working on my blog with this style of menu.
    http://www.sayujbuzz.com

    ReplyDelete
  28. I need Your Help Want to create a drop down menu in Dynamic Blogger Template :( not able to create .... will you please help me .... http://knowledgehutt.blogspot.in/ m blog

    ReplyDelete
  29. I don't find "body" in my template,So How? Can you help me

    ReplyDelete
  30. woww nice i like this post..........

    ReplyDelete
  31. Hello guys
    I installed this menu that works wonders. But I'd like to increase the size of the font in the drop down buttons. As the font is super small... its hard to read. Can you tell me where to change that?

    ReplyDelete
  32. Hey can you make this responsive ropdown into a multi level dropdown ?!! Pleasee ... i am looking for a responsive multi level dropdown all over but till date i have found this post as the best. I want to convert this into a multi level dropdown .. please help me.. will i have to add ant css for it ?

    ReplyDelete
  33. Awesome Post.I have made my template responsive using the above code and it looks awesome.Thanks for this post.

    ReplyDelete
  34. Hey Bro, your website has seriously helped me a lot, I have implemented these menus on 2 of my websites, first one is about the Apple Technology www.iappnalysis.com and second is about the new Tizen Technology www.tizenostpkworld.com
    I was in a pursuit of creating a fully responsive website starting from scratch and responsive menu is were I was lagging, but thanks to this tutorial
    I have discovered one trick in blogger that if we set our mobile template from default to custom and then go to any particular widget and add mobile='yes' that we can easily make our blogger profile responsive, you should create a tutorial on this. It will be really helpful to many bloggers :)

    ReplyDelete
  35. Is there any way to make this "sticky" ?

    Thanks!

    ReplyDelete
  36. Thank you so much - finally one that worked!

    ReplyDelete
  37. Hello, it works on desktop version but can't work on mobile version!
    How to solve it?

    ReplyDelete
  38. Hello,
    The responsive menu bar works well on desktop version but it disappears on mobile version. Please advise :)

    ReplyDelete
  39. Hi, the drop-downs are at the bottom of the page. How do i bring them up to the top of the page?

    ReplyDelete
  40. Assalam-walekum Mustafa:
    I am following your blog for last one year. Your work is really commendable. I am proud of you. I also run blogs. e.g. www.essssay.com, I found this article really nice. I have edited to create submenu. please find the error if any. However it is working nice. I added this code in css section.

    #menu li:hover ul.menus li:hover ul.submenus{display:block}
    #menu ul.menus a:hover{
    background: #5FC6EB;
    color: #FFF;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    }

    @media screen and (max-width: 800px){
    #menu{position:relative}
    #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
    #menu ul.submenus{width:100%;position:static;padding-left:20px}
    #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
    #menu input,#menu label{position:absolute;top:0;left:0;display:block}
    #menu input{z-index:4}
    #menu input:checked + label{color:white}
    #menu input:checked ~ ul{display:block}
    }

    I have not added this code above
    Bu tone error i have noticed that my nav menu is not showing 100% width. It has a margin at left and right.
    can you find this error at my test blog: http://testakb1.blogspot.in/

    My name is AKBAR ALI husband of AZRA AHMAD

    ReplyDelete
  41. Is there a way I can make this ONLY visible on the mobile view?

    ReplyDelete
    Replies
    1. This exactly what i wanted to ask. My blog's mobile view lacks the navigation menu and this would be perfect for it. i hope @admin has an answer for us

      Delete
    2. Sure you can do that by enclosing the Menu HTML code inside isMobileRequest conditional tag. Read this post

      How to hide or show widgets Only in Mobile devices

      Or you can try a more updated and advance version of this menu by reading this post:

      Create a Mobile Responsive Menu

      Hope this answers your question :)

      Delete
  42. hi ,
    how can we add extra submenu inside submenu?

    ReplyDelete
  43. Hi, for some reason the words at the top disappear once i click on the drop down menu. I don't know why. Please help!!!

    ReplyDelete
  44. This worked great on my browser, but disappeared in the mobile version. Can you help? Thanks.

    ReplyDelete
  45. Update:

    You can try a more updated and advance version of this menu by reading this post:

    Create a Mobile Responsive Menu

    Hope this answers your question :)

    ReplyDelete
    Replies
    1. Thank you for that menu was what I was looking for.
      Unfortunately the admin layout looked like this: http://i.snag.gy/jRcF5.jpg
      How can I fix?

      Delete
  46. How to add a search bar in this navbar menu? Thanks for your answer. :-)

    ReplyDelete
  47. this is a very simple and fast loading responsive menu. But i want to know that showing the desktop (responsive) template on mobile device would negatively affect ranking or not?

    ReplyDelete
  48. hi.. i link your menu.. how can i convert this into multi-column?

    ReplyDelete
  49. bro,my website not show this navigation menu,plz help me

    ReplyDelete
  50. Is there a way to adapt this to work with a mobile enabled blog?

    ReplyDelete
    Replies
    1. display a tmobile
      find this code #menu ul{height:45px; width:1024px}
      replace it with this #menu ul{height:45px; width:px}

      Delete
  51. Everything looks great except on mobile device. My blog title instead of staying in the horizontal menu is floating beneath it vertically. How do I fix this? Also how do I display just my blog posts and not my sidebar on mobile devices? Thanks for the post. Love this menu

    http://theartofmantips.blogspot.com/

    ReplyDelete
  52. This is great menu, look amazing on mobile and pc. But have some problem here, the sub menu cut off. And the block link too. What should i do?? Need help..

    ReplyDelete
  53. This is what I looking for. Thanks a lot :D

    ReplyDelete
  54. Thanks a lot.. got what i was looking for..

    ReplyDelete
  55. hi mohammad i like your dropdown menü but i have trouble whit it. http://ttvfr.blogspot.de/p/willkommen.html this is my blog. if i try to open willkommen.html i got only a white screen nothing else no error messages nothing. I think the site will be shown in a wrong frame!?!? i need help? greetings patrice

    ReplyDelete