A CodePen by devkick. Simple Responsive Navigation - Resize your screen to see the effect. Use it as base.

index.html

<header>
  <div class="toggle"><a href="">Menu</a></div>
<nav>
 <ul>
  <li><a href="#">Another</a></li>
  <li><a href="#">mobile</a></li>
  <li><a href="#">responsive</a></li>
  <li><a href="#">navigation</a></li>
  <li><a href="#">v1</a></li>
</ul>
</nav>
</header>

script.js

$(".toggle").click(function(e){
$("nav").toggleClass("active");
  return false;
});

style.css

body {background-color:#00afc4; font-size: 100%;}

a:link, a:visited {color:#ccc; text-decoration:none; text-transform: uppercase; font-family: Helvetica;font-size:.8rem;}

a:hover {color:#fff;}

header {
  width: 100%; 
  height:50px; 
  background-color:#121b21;
}

.toggle {
  width:100%;
  height:50px;
  display:none;
  position:relative;

}

.toggle a {display:block;background-color:#283136; color:#fff; width: 25%; position:absolute; right:0; top:0; height:50px;text-align:center; line-height:4em;}


nav {
  display:block;
  
}
nav ul {
  display:table; margin: 0 auto;
}
nav ul li {
  display:inline;
  margin:0;
  padding:0;
  line-height: 3em;
}

nav ul li a {display:block; float:left; margin: 0 1em;}




@media screen and (max-width: 770px) {
  header {
    width: 100%; min-height: 50px; height: auto;
  }
  header .toggle {
    display:block;
  }
   nav {
    display:none;
    
  }
   nav.active {
    display:block;
   
  }
  nav ul {
    margin: 0;
     width:100%;
  }
  nav ul li {
    display:block;
    
    
  }
  
  nav ul li a {
    display:block;
    width:100%;
    background-color:#283136;
    height:50px;
    text-align:center;
    margin:0;
    padding:0;
    border-bottom: 1px solid #121b21;
  }
}