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:

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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Releated

Best Android Homescreen Customization For 2018 (Nova Launcher + Zooper Widget)

Android Homescreen Customization 2018 Android is the most popular operating system over the mobile platform today. It has lots of features and specifications. One of the most amazing feature of android is its ability to customize the device. So today we will discuss on Homescreen Customization. Lets roll over it. What is Android Homescreen? Android Homescreen is the […]