How to Easily Add a Mobile Responsive Menu in Blogger

Advertisements
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.
Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

31 comments

August 17, 2014 at 8:57 AM

Just awesome...

September 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 "

Editorial Team MOD
September 4, 2014 at 6:37 AM

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

December 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

Editorial Team MOD
December 21, 2014 at 2:28 AM

Thank, the code is been fixed.

April 22, 2015 at 8:04 AM

Thanks for sharing

June 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?

Editorial Team MOD
June 16, 2015 at 2:20 AM

It's in Head

June 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!

Editorial Team MOD
June 23, 2015 at 9:33 AM

Use media queries

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

November 9, 2015 at 1:09 AM

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

Editorial Team MOD
November 12, 2015 at 7:17 AM

Please provide me blog url

January 12, 2016 at 1:55 PM

same, when i click on the menu it doesn't open

January 12, 2016 at 4:08 PM

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

January 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..!!

January 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

Editorial Team MOD
January 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

Editorial Team MOD
January 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.

Editorial Team MOD
January 13, 2016 at 2:22 PM

Tutorial updated please apply again.

Editorial Team MOD
January 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.

January 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

Editorial Team MOD
January 15, 2016 at 1:50 AM

Working fine for me.

January 22, 2016 at 9:39 AM

Now its working, thank you!

February 7, 2016 at 11:21 PM

Thanks, menu ok

March 12, 2016 at 12:04 AM

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

May 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

July 5, 2016 at 6:54 AM

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

July 8, 2016 at 9:11 AM

Thank you so much! It works perfectly ;)

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 :(

Editorial Team MOD
July 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

August 27, 2016 at 2:08 AM

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

Post a Comment

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.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.