August 15, 2014

How to Easily Add a Mobile Responsive Menu in Blogger

Menus or better known as navigation menus are extremely useful for providing a user-friendly environment to your visitors. Menus enable your visitors to look for the exact content they are looking for by going through specific categories. However, now day’s menus have changed into Responsive menu providing flexibility for mobile users to navigate through your site with ease. In case you’re looking to add a mobile, responsive menu to your blogger blog then you are fortunate to be at the right place. Today in this article, we will show you how to easily add a mobile responsive menu in blogger.

Recommanded Articles:
  1. How to Enable a Responsive Mobile Template in Blogger
  2. How To Make Your Website Responsive to Mobile Devices

What is Responsive Menu?

Responsive menus are such navigation menus, which are flexible and user-friendly at the very same time. They provide a quality experience for both desktop users to mobile users. When on the desktop they appear the traditional way, but on mobile they appear just like a mobile application width, height and well arranged. In the following screenshot, you can clearly see the same menu appearing different on the desktop and on a smartphone.

Live preview of this menu can be seen at this site http://movieismdemo.blogspot.com//

How to easily add a Responsive menu in Blogger?

When it comes to creating a responsive menu in blogger we have a variety of techniques on how to we can handle our navigation menus for small screen devices like mobile phones, smartphones and etc. The resources we have got to achieve this goal are endless. In this article, we will show a main concept that is easier to implement and have more advantages than disadvantages.

The very first thing you need to do is to go to Blogger.com > Template > Edit HTML and paste the following code anywhere after <body> tag. (Keep in mind paste this code exactly where you would like to your menu to appear).

<!---Menu--> <nav id='nav-main'>
    <ul>
        <li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Gallery</a></li>
        <li><a href=''>Tutorials</a></li>
        <li><a href=''>Contact</a></li>
    </ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>


Now you to style the menu, you need to add the CSS to your template. To do so again in the template, search for }}]]></b:skin> tag and just below it paste the following code

#nav-trigger {
    display: none;
    text-align: center;
}
#nav-trigger span {
    display: block;
    background-color: #279CEB;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
}
nav#nav-mobile {
    margin: 0px;
}
nav {
    margin-bottom: 30px;
}
#nav-main {
    background-color: #279CEB;
    margin: 0px;
    float: left;
}
#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav-main li {
    display: inline-block;
    float: left;
    ont-family: &#39;
    Open Sans&#39;
    , sans-serif;
}
#nav-main li:last-child {
    border-right: none;
}
#nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
#nav-main a:hover {
    background-color: #3AB0FF;
    text-decoration: none;
    color: #fff;
}
#nav-mobile {
    position: relatifve;
    display: none;
}
#nav-mobile ul {
    display: none;
    list-style-type: none;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #ddf0f9;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #cc0028;
}
nav#nav-mobile li:last-child {
    border-bottom: none;
}
nav#nav-mobile ul {
    padding: 0;
    margin: 0;
}
nav#nav-mobile a {
    display: block;
    color: #29a7e1;
    padding: 10px 0px;
    text-decoration: none;
    border-bottom: 1px solid #00aeef;
    text-align: center;
}
nav#nav-mobile a:hover {
    background-color: #111;
    color: #fff;
}
nav#nav-mobile li {
    display: block;
}
nav#nav-mobile {
    display: none;
}
/* =Media Queries
-------------------------------------------------------------- */

@media all and (max-width: 900px) {
    #nav-trigger {
        display: block;
    }
    #nav-main {
        display: none!important;
    }
    nav#nav-mobile {
        display: block;
    }
}

After adding HTML and CSS core coding, without adding the following JavaScript code the menu would not work correctly. Therefore, add the following code just above the </head> tag.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
    $("#nav-mobile").html($("#nav-main").html());
    $("#nav-trigger span").click(function(){
        if ($("nav#nav-mobile ul").hasClass("expanded")) {
            $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
            $(this).removeClass("open");
        } else {
            $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
            $(this).addClass("open");
        }
    });
});
//]]>
</script>

Once you are done adding the above three codes in your template, save it by pressing "Save Template". Congratulations, you have successfully added mobile responsive menu in blogger. Now go and test your site from desktop and mobile to experience the difference.

Frequently Asked Questions:

Why when I click the Menu it doesn't open?
Answer: Make sure you have followed the instructions mentioned above correctly. In case you are sure you have followed the steps correctly you might be missing a jquery.min.js file, while is must to trigger the menu on mobile. Go to Blogger >> Template >> Edit HTML >> search for <head> and just below it paste the following code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

We hope this tutorial will help everyone in learning how to easily add a responsive menu in blogger without facing much of worries. If you like this article, do share it with your friends.

32 comments:

  1. Faysal ShahiAugust 17, 2014 at 8:57 AM

    Just awesome...

    ReplyDelete
  2. sanketSeptember 4, 2014 at 5:29 AM

    Help me

    Error parsing XML, line 1017, column 3: The element type "html" must be terminated by the matching end-tag "

    ReplyDelete
    Replies
    1. Syed Faizan AliSeptember 4, 2014 at 6:37 AM

      Can you tell me on which step you're facing the error.

      Delete
    2. Laécio RodriguesDecember 13, 2014 at 8:23 PM

      Sorry my English. The error is happening by the lack of a < div >.
      this part:

      < nav id = ' nav - mobile ' / >
      < / div >

      Just open the tag "div", therefore it is only closed.

      < div >
      < nav id = ' nav - mobile ' / >
      < / div >

      Moderator, fixes that part in the post. Thanks

      Delete
    3. Syed Faizan AliDecember 21, 2014 at 2:28 AM

      Thank, the code is been fixed.

      Delete
  3. ShalitaJune 15, 2015 at 7:07 AM

    Can u help me

    i cant find the" }}]]> tag" in the html. is it in the body or head?

    ReplyDelete
  4. UnknownJune 22, 2015 at 9:43 PM

    Help me! I want this menu to appear only in the mobile version, what should I do?

    thank you!

    ReplyDelete
    Replies
    1. Syed Faizan AliJune 23, 2015 at 9:33 AM

      Use media queries

      https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

      Delete
  5. MoonNovember 9, 2015 at 1:09 AM

    its not working, when i click on the menu it doesn't open

    ReplyDelete
  6. JuliaJanuary 12, 2016 at 4:08 PM

    In my blog (http://ruthalmada.blogspot.com.br/) isn't working too, the menu doesn't open

    ReplyDelete
    Replies
    1. Syed Faizan AliJanuary 13, 2016 at 2:22 PM

      I checked your site, you are missing jquery.min.js file (Check Frequently asked questions above in the end of the post).

      I have updated the tutorial, I would recommend you to remove all the codes you added before and re-apply the new codes correctly. This time it will work just fine.

      Delete
    2. JuliaJanuary 22, 2016 at 9:39 AM

      Now its working, thank you!

      Delete
  7. UnknownJanuary 12, 2016 at 8:05 PM

    Thanks for the post, It worked for me only on homepage. Unfortunately the menu is not working for blog post.

    Short this issue out..!!

    ReplyDelete
    Replies
    1. Syed Faizan AliJanuary 13, 2016 at 2:20 PM

      We have updated the tutorial, follow it correctly and this time menu will work just fine.

      A TIP:
      Make sure your each blog post contains jquery.min.js file because it is essential to trigger the menu.

      To add this file in each page. Go to Blogger >> Template >> EDIT HTML >> search for <head> and below it paste the following code:

      <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

      Cheers

      Delete
  8. TeknojestJanuary 13, 2016 at 12:09 AM

    It is not opening on mobile (not toogle!) I think on js there are some problem. Could you check my demo page ?
    http://eb-pinardesserts.blogspot.de

    ReplyDelete
    Replies
    1. Syed Faizan AliJanuary 13, 2016 at 2:30 PM

      Hi,

      Your jquery.min.js file is place at the end of the template which is a wrong approach and this is the reason why it is not working.

      1. Go to Blogger >> Template >> Edit HTML >> Search for this

      <script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

      2. After finding the above code, Copy it. and Remove it.

      3. Now Look for <head>, and paste the code you copied just below <head>.

      4. Save Template.

      IMPORTANT: We have updated the CSS codes, Please update the CSS codes to make it work better.

      Delete
    2. TeknojestJanuary 13, 2016 at 2:53 PM

      I made it now but no change. Could you check again my demo ?
      http://eb-pinardesserts.blogspot.de
      Thanks

      Delete
    3. Syed Faizan AliJanuary 15, 2016 at 1:50 AM

      Working fine for me.

      Delete
  9. dg patangFebruary 7, 2016 at 11:21 PM

    Thanks, menu ok

    ReplyDelete
  10. UnknownMarch 12, 2016 at 12:04 AM

    I want to use this widget at a particular navigation bar how can i do that?

    ReplyDelete
  11. Mike SMay 4, 2016 at 6:11 PM

    I have a CSS drop-down menu on blogger that I'd like to make mobile-friendly, can you post a generic blog entry about how to take an existing menu and apply this approach to it?
    Thx,
    Mike

    ReplyDelete
  12. Madeleine BarónJuly 5, 2016 at 6:54 AM

    Thank you so much! this was super helpful, well explained and perfect for what i needed!

    ReplyDelete
  13. Jessica MJuly 8, 2016 at 9:11 AM

    Thank you so much! It works perfectly ;)

    ReplyDelete
  14. Nin July 21, 2016 at 1:20 PM

    Not working in my mobile, even tried to put the code just BELOW [head]

    Also, it changed my navbar to vertical. What a mess :(

    ReplyDelete
    Replies
    1. Syed Faizan AliJuly 26, 2016 at 11:30 PM

      Did you add the Code correctly? Because it should only work for mobile users not desktop users?

      Can you please provide me your blog URL?

      Cheers

      Delete
  15. GBAugust 27, 2016 at 2:08 AM

    how to hide this code for desktop and only work for mobile view

    ReplyDelete
    Replies
    1. UnknownJanuary 20, 2017 at 4:33 AM

      Could you resolve this issue? I have the same. Now I have two Navigations in my blog.

      Delete
  16. KennethDecember 10, 2016 at 8:17 PM

    Is there a way to make the menu on mobile view a bit bigger? (Using CSS, perhaps?) Thanks! :)

    ReplyDelete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.