Add a responsive dropdown menu To Your Blog on blogger

This responsive dropdown menu will definitely make your blog look stylish and professional, to say the least.
Initially, I had a horizontal menu display which kind of took a good amount of space in my blog's mobile view.

Originally gotten from mybloggerlab, I only made minor tweaks by adding the social bar and search box as well as making it sticky.

Below are the features of this menu
Responsive - this menu is very responsive  and doesn't take much space in your blog. If you use the default blogger template, a switch between desktop and menu view leaves you with the desktop and mobile menu respectively.
Light weight - this menu for the health of your blog is light wight and loads instantly with your blog.

Note; This dropdown menu doesn't have sub-menu thus not suitable for those in search of a menu bar with sub-menu and you may have to continue your search!

All the same, this menu is perfect!

How to add the Responsive dropdown menu with social and search box to blogger...
Before you take more steps, please back up your template, in case you make some unknown mistakes.

Need a Demo? Check it out 

Step 1- Adding the CSS

Search for ]]></b:skin>, then paste the CSS code below just above it.

/*** Dropdown Menu***/
#nav-wrapper {
 margin:0 auto;
 position: fixed;
 width:100%;
 float: none !important;
     top: 0px;
     padding-bottom: 5px;
     z-index: 1;
     height: 20px;
     border-bottom: 1px solid #fafafa;
}
#nav-trigger {
    display: none;
    text-align: left;
}
#nav-trigger span {
    display: block;
    background-color: #000;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 25px;
    color: #EEE;
    line-height: 50px;
}
nav#nav-mobile {
    margin: 0px;
}
nav {
    margin-bottom: 30px;
}
#nav-main {
 background-color: #000;
    float: left;
    width: 100% !important;
}
#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
}
#nav-main li {
    display: inline-block;
    float: left;
    ont-family: '
    Open Sans'
    , 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: #edbf9d;
    text-decoration: none;
    color: #fff;
}
#nav-mobile {
    position: relative;
    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: #000;
    z-index: 10;
    padding: 0px;
    border-bottom: solid 1px #171717;
}
nav#nav-mobile li:last-child {
    border-bottom: none;
}
nav#nav-mobile ul {
    padding: 0;
    margin: 0;
}
nav#nav-mobile a {
    display: block;
    color: #fff;
    padding: 10px 0px;
    text-decoration: none;
    border-bottom: 1px solid #3a3a3a;
    text-align: left;
}
nav#nav-mobile a:hover {
    background-color: #111;
    color: #fff;
}
nav#nav-mobile li {
    display: block;
}

nav#nav-mobile {
    display: none;
}

@media all and (max-width: 900px) {
    #nav-trigger {
        display: block;
    }
    #nav-main {
        display: none!important;
    }
    nav#nav-mobile {
        display: block;
    }
}
@media screen and (max-width : 699px) {
#nav-wrapper {
 width: 100%;
margin : 0em;
padding: 0px;
}
}

You can make some major changes by replacing the #000 background-color with your desired colour. This will change the look and feel of your menu bar.

Step 2- Adding the HTML code
To add the menu, go to the html of your theme and search for </header> now add the html code below immediately after/below it for better results, you can as well search for <header> and place the code below before/above it if you want your menu list to appear before your header.

<div id='nav-wrapper'>
<nav id='nav-main'>
    <ul>
    <li><a class='homer' href='#'><i class='fa fa-home'/> HOME</a>
    </li>
<li><a href='/p/about.html'>About</a>
</li>
<li><a href='/p/contact.html'>Contact</a></li>
<li><a href='/p/copyright.html'>Copyright</a></li>
<li><a href='/p/privacy.html'>Privacy Policy</a></li>
<li><a href='/p/disclcoder.html'>Disclaimer</a></li>

<li><a href='/p/terms.html'>Terms</a></li>  
  </ul>
</nav>
<div id='nav-trigger'>
    <span><i class='fa fa-list fa-2x'/></span>
</div>
<nav id='nav-mobile'/> 
</div>

Please replace page links with the correct links in your blog if necessary. You can add more links by
editing and pasting this <li><a href='LINK HERE'>LINK TITLE</a></li> below </ul>


Step 3- Adding the JavaScript code
Now search for </body> and paste the code below just above it.

<script type='text/javascript'>
//<![CDATA[
$undefineddocument).readyundefinedfunctionundefined){
    $undefined"#nav-mobile").htmlundefined$undefined"#nav-main").htmlundefined));
    $undefined"#nav-trigger span").clickundefinedfunctionundefined){
        if undefined$undefined"nav#nav-mobile ul").hasClassundefined"expanded")) {
            $undefined"nav#nav-mobile ul.expanded").removeClassundefined"expanded").slideUpundefined250);
            $undefinedthis).removeClassundefined"open");
        } else {
            $undefined"nav#nav-mobile ul").addClassundefined"expanded").slideDownundefined250);
            $undefinedthis).addClassundefined"open");
        }
    });
});
//]]>
</script>

And that's it...
Save your template, check your blog and enjoy! Encountered any problem?
Let me know in the comment box.