How To Add Mobile Responsive Menu To Blogger/Wordpress

Now a day, maximum people are adoption blogging platform to share their views, opinions and feelings. As you all know there are lots of blogging platform which are used to manage a blog of a website. Blogger and Wordpress are the two biggest blogging platform of the world. So i have decided to write a tutorial on mobile menu for bloggers as well as wordpress users

What is Mobile Menu?

Mobile menu is a native responsive menu that is designed to fit the interface of various mobile devices. There are Billions of users who are surfing the web using mobiles today. It is easy for them to browse through a mobile responsive sites. If your website or blog is responsive but the menu is not responsive then you may lose your visitor. In order to have a better user interface your website must have a mobile responsive menu. Because when a visitor first enter your blog through a do follow link, he/she used to click the menu for browsing various article section on your blog. This is why mobile responsive menus are more demanded today.

How to add Mobile responsive menu on blogs?

To design a beautiful mobile responsive menu for your blog or website follow the steps given below perfectly. I have created a new layout for mobile menu. You can see the screenshots in the below section after steps:
Also Read: Animated CSS JQuery Search Box For Blogger & Wordpress

Step 1: Add the HTML code

<div id='main'>
<div class='container'>
 <div  style='margin-top:150px;margin-bottom:30px;text-align:center;'>
 <img src='your-logo-url.png' style='width: 100px;margin-bottom:15px'>
 <h1>Material Design Responsive Menu For Bloggers</h1>
 <br/>
 <h2>Designed by Droidadda</h2>
 </div>
 <navbar class="fixed-top">
 <div class='nav-fostrap'>
 <ul>
 <li><a href=''>Home</a></li>
 <li><a href='javascript:void(0)'>Web Design<span class='arrow-down'>
 </span></a>
 <ul class='dropdown'>
 <li><a href=''>HTML</a></li>
 <li><a href=''>CSS</a></li>
 <li><a href=''>Javascript</a></li>
 <li><a href=''>JQuery</a></li>
 </ul>
 </li>
 <li><a href='javascript:void(0)' >Blogger<span class='arrow-down'>
 </span></a>
 <ul class='dropdown'>
 <li><a href=''>Widget</a></li>
 <li><a href=''>Tips</a></li>
 </ul>
 </li>
 <li><a href='javascript:void(0)' >SEO<span class='arrow-down'>
 </span></a>
 <ul class='dropdown'>
 <li><a href=''>Tools</a></li>
 <li><a href=''>Backlink</a></li>
 </ul>
 </li>
 <li><a href=''>Google Adsense</a></li>
 <li><a href=''>Advertising</a></li>
 <li><a href=''>Business</a></li>
 </ul>
 </div>
 <div class='navbar-fostrap'> <span></span> <span></span> <span></span> 
 </div>
 <a href='' class='title-on-mobile'>Fostrap</a>
 </div>
 </navbar> 
 </div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'>
</script>

Step 1: Add the CSS code

body {
  background: #F0F0F0;
  font-size: 15px;
  color: #666;
  font-family: 'Roboto', sans-serif;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}
body {
 padding-top: 50px;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
navbar a { text-decoration: none !important; }
.nav-fostrap {
  display: block;
  margin-bottom: 15px 0;
  background: #3498db;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 120;
}
.nav-fostrap ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: block;
}
.nav-fostrap li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 14px;
  color: #def1f0;
}
.nav-fostrap li a {
  padding: 15px 20px;
  font-size: 14px;
  color: #def1f0;
  display: inline-block;
  outline: 0;
  font-weight: 400;
}
.nav-fostrap li:hover ul.dropdown { display: block; }
.nav-fostrap li ul.dropdown {
  position: absolute;
  display: none;
  width: 200px;
  background: #2980b9;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  padding-top: 0;
  z-index: 110;
}
.nav-fostrap li ul.dropdown li {
  display: block;
  list-style-type: none;
}
.nav-fostrap li ul.dropdown li a {
  padding: 15px 20px;
  font-size: 15px;
  color: #fff;
  display: block;
  font-weight: 400;
}
.nav-fostrap li ul.dropdown li:last-child a { border-bottom: none; }

.nav-fostrap li:hover a {
  background: #2980b9;
  color: #fff !important;
}
.nav-fostrap li:first-child:hover a { border-radius: 3px 0 0 3px; }
.nav-fostrap li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }
.nav-fostrap li ul.dropdown li:first-child:hover a { border-radius: 0; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -5px;
  content: '';
}
.title-on-mobile {
  display: none;
}
 @media only screen and (max-width:900px) {
.nav-fostrap {
  background: #fff;
  width: 200px;
  height: 100%;
  display: block;
  position: fixed;
  left: -200px;
  top: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  z-index: 105;
}
.title-on-mobile {
  position: fixed;
  display: block;
    top: 10px;
    font-size: 20px;
    left: 100px;
    right: 100px;
    text-align: center;
    color: #FFF !important;
}
.nav-fostrap.visible {
  left: 0px;
  -webkit-transition: left 0.25s ease;
  -moz-transition: left 0.25s ease;
  -ms-transition: left 0.25s ease;
  -o-transition: left 0.25s ease;
  transition: left 0.25s ease;
  z-index: 90;
}
.nav-bg-fostrap {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  height: 50px;
  margin: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #3498db;
  padding: 12px 0 0 10px;
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  z-index: 100;
}
.navbar-fostrap {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  cursor: pointer;
  margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    padding: 12px;
    z-index: 102;
}
.navbar-fostrap span {
  height: 2px;
  background: #fff;
  margin: 5px;
  display: block;
  width: 20px;
}
.navbar-fostrap span:nth-child(2) { width: 20px; }
.navbar-fostrap span:nth-child(3) { width: 20px; }
.nav-fostrap ul { padding-top: 50px; }
.nav-fostrap li { display: block; }
.nav-fostrap li a {
  display: block;
  color: #505050;
  font-weight: 600;
}
.nav-fostrap li:first-child:hover a { border-radius: 0; }
.nav-fostrap li ul.dropdown { position: relative; }
.nav-fostrap li ul.dropdown li a {
  background: #2980b9 !important;
  border-bottom: none;
  color: #fff !important;
}
.nav-fostrap li:hover a {
  background: #3498db;
  color: #fff !important;
}
.nav-fostrap li ul.dropdown li:hover a {
  background: rgba(0,0,0,.1); !important;
  color: #fff !important;
}
.nav-fostrap li ul.dropdown li a { padding: 10px 10px 10px 30px; }
.nav-fostrap li:hover .arrow-down { border-top: 5px solid #fff; }
.arrow-down {
  border-top: 5px solid #505050;
  position: absolute;
  top: 20px;
  right: 10px;
}
.cover-bg {
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
}
 @media only screen and (max-width:1199px) {
.container { width: 96%; }
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
left:0; 
z-index:120;
}

Step 1: Add the Javascript code

$(document).ready(function(){
  $('.navbar-fostrap').click(function(){
   $('.nav-fostrap').toggleClass('visible');
   $('body').toggleClass('cover-bg');
  });
 });

• Save your theme/Template and see the result.
• This way you can add this beautiful mobile responsive menu on your blog or website.

You can also see this:

See the Pen Fixed Navigation Menu Material Design by Sunmughan Swamy (@sunmughan) on CodePen

Also Read: Beautiful Animated Button With confirmation For Websites

Menu Screenshots

Desktop View

Mobile View

Final Words

This was the article on How To Add Mobile Responsive Menu To Blogger/Wordpress. I hope you'll like this article. If you need any extra help completing this guide, then you should tell me in comments. If installation fails, then the only thing that you need to do is to try and repeat the whole tutorial more than once.
Also Read: Animated CSS-JQuery Filter For Websites & Blogs

Google Search Tags:

CSS Menu, HTML Menu, Mobile Menu, HTML CSS Menu, HTML CSS Menu for Websites, Beautiful CSS Menu for blogs, Beautiful CSS Menu for Websites, Beautiful CSS Menu for Wordpress, Best Mobile Responsive menu for Blogger, Best Mobile Responsive menu for Wordpress, Best Mobile Responsive menu for BloggerWebsites, Best Mobile Responsive menu, Best Mobile menu for Blogger, Best Mobile menu for Wordpress, Best Mobile menu for Websites, Fully Responsive Mobile Menu for Blogger, Fully Responsive Mobile Menu for Wordpress, Fully Responsive Mobile Menu for Websites

Thankyou for visiting Droidadda. For fast access to our service Bookmark & Subscribe us now. Share this article with your friends and show how they can learn amazing things on Droidadda. If any issues then feel free to comment below. Peace out.