Nowadays there is no website if it is not responsive. Among the first things you have to do is to make a responsive menu for your website. On desktop you can let the menu as a list, but on the smaller devices you can't do this because you do not have that much space, so you have to hide the menu and show only a button and then when you click it, the menu will show up.

To accomplish this you need to write few lines of HTML, CSS and jQuery. You have no reason to worry because is very easy to do this.

Let's assume we will use the following HTML structure:

<div class="header">
   <div class="hamburger_menu"></div>
   <ul>
      <li><a href="">Home</a></li>
      <li><a href="">News</a></li>
      <li><a href="">Contact</a></li>
   </ul>
</div>

This is our html structure for the header, I know there is no logo there and the menu is very short but you can implement this code for your own website.

The CSS for our menu:

.header{
  padding:15px 0;
  position:relative;
}
.header ul{
  text-align:center;
}
.header li{
  display:inline-block;
  padding:0 15px;
}
.header li a{
 	color:#fff;
}
@media all and (max-width:980px){
  .header ul{
     display:none;
  }
  .header ul li{
     display:block;
  }
  .hamburger_menu:after{
    content:"\f0c9";
    font-family:FontAwesome;
    color:#fff;
    font-size:42px;
    float:right;
  }
  .hamburger_menu.active:after{
    content:"\f00d";
  }
}

For this example we have just used the font awesome icons because are very easy to implement against images, when you need to make a sprite if you want to change it on click and so on.

What the css actually do: in the first part we add some style for the header and positioning the menu items inline. Then when the viewport is smaller then 980 we hide the <ul> tag and show our hamburger_menu.  In the last line of css we change the font awesome icon when the "active" class is added. We add this class by jquery when you click on the hamburger menu.

jQuery:

jQuery('.hamburger_menu').on('click', function(){
    jQuery(this).toggleClass('active');
    jQuery('.header > ul').slideToggle();
});

In one of the past tutorials we have learnt how to change a class at click by jquery .  At first click we add a class on the element to change the icon, then show the <ul> element where is our menu.

That's it, little below you can see the menu in action.