title: How can I make my navbar responsive?
body: <p>I have this navbar at codepen:<a href="http://codepen.io/DogburnDesign/pen/zymID" rel="nofollow">http://codepen.io/DogburnDesign/pen/zymID</a>.
  It's nice and all but I've realized that it is not responsive. I am quite experienced in making websites but I am new to this responsive thing. Any help guys?</p>
  
  <p>Thanks. here is the code:</p>
  
  <h1>HTML:</h1>
  
  <pre><code>    &lt;div id="bg"&gt;&lt;/div&gt;
  &lt;section&gt;
    &lt;nav&gt;
      &lt;div&gt;&lt;/div&gt;
      &lt;ul&gt;
        &lt;li data-xcoord="0px" class="active"&gt;Home&lt;/li&gt;
        &lt;li data-xcoord="160px"&gt;About&lt;/li&gt;
        &lt;li data-xcoord="320px"&gt;Contact&lt;/li&gt;
        &lt;li data-xcoord="480px"&gt;Store&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/section&gt;
  </code></pre>
  
  <h1>CSS:</h1>
  
  <pre><code>#bg{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
  background: #38a8d1;
  background: -moz-linear-gradient(top,  #38a8d1 0%, #34bc9a 36%, #34bc9a 57%, #8645f7 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#38a8d1), color-stop(36%,#34bc9a), color-stop(57%,#34bc9a), color-stop(100%,#8645f7));
  background: -webkit-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
  background: -o-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
  background: -ms-linear-gradient(top,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
  background: linear-gradient(to bottom,  #38a8d1 0%,#34bc9a 36%,#34bc9a 57%,#8645f7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38a8d1', endColorstr='#8645f7',GradientType=0 );
  }
  
  section{
    position:relative;
    width:640px;
    margin:50px auto;
  }
  nav{
    width:100%;
  }
  nav ul li{
    display:inline-block;
    list-style:none;
    width:160px;
    text-align:center;
    font-family:Helvetica, sans-serif;
    border: 1px dashed rgba(255,255,255, 0);
    color:#fff;
    padding:10px 0 10px 0;
    margin:-1px -5px -1px -1px;
    cursor:pointer;
    transition:all .2s;
    -webkit-transition:all .2s;
  }
  nav ul li:hover{
    /*border:1px dashed #fff;*/
    background:rgba(255,255,255,.1);
  }
  nav ul{
    border: 1px solid #fff;
    position:absolute;
    width:100%;
    padding:0;
    z-index:100;
  }
  nav div{
    position:absolute;
    left:0;
    top:16px;
    background: #fff;
    width:162px;
    height:40px;
    z-index:99;
  }
  .active{
    color:rgba(55, 186, 177, 1);
  }
  </code></pre>
  
  <h1>And last but not least, JS:</h1>
  
  <pre><code>$("nav ul li").click(function(){
    var xcoord = $(this).data("xcoord");
  
    $("nav div").stop().animate({marginLeft:xcoord}, 500, "easeInOutExpo");
    $(this).addClass("active");
    $("nav ul li").not(this).removeClass("active");
  
  });
  </code></pre>