javascript - How can I make my navbar responsive? -

i have navbar @ codepen:http://codepen.io/dogburndesign/pen/zymid. it's nice , i've realized not responsive. quite experienced in making websites new responsive thing. guys?

thanks. here code:

html:

    <div id="bg"></div> <section>   <nav>     <div></div>     <ul>       <li data-xcoord="0px" class="active">home</li>       <li data-xcoord="160px">about</li>       <li data-xcoord="320px">contact</li>       <li data-xcoord="480px">store</li>     </ul>   </nav> </section> 

css:

#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); } 

and last not least, js:

$("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");  }); 

you need use media queries. see working example below (you should check full screen version , play browser width)

if create responsive layouts, easier if think in percentages. not create element 640px wide, create element 100% wide max-width 640px. if user's viewport wider 640px element 640px, if viewport less 640px wide, element x% of width. point need think responsive, not practice create thousands of media queries every 10px of screen width

i recommend use responsive css frameworks, i.e bootstrap 3

$("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");    });

#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: 100%;    max-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:color .2s, background .2s;    -webkit-transition:color .2s, background .2s;  }  nav ul li:not(.active):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;  }  .active{    color:rgba(55, 186, 177, 1);    background: #fff;  }    @media screen , (max-width : 720px) {    nav ul{      width: 80%;      left: 10%;    }    nav ul li{      display: block;      width: 100%;    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>      <div id="bg"></div>  <section>    <nav>      <ul>        <li class="active">home</li>        <li>about</li>        <li>contact</li>        <li>store</li>      </ul>    </nav>  </section>

solution number 2 not require media queries , keeps list elements floating. see solution below

$("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");    });

#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: 100%;    max-width:640px;    margin:50px auto;  }  nav{    width:100%;  }  nav ul li{    display:inline-block;    list-style:none;    width:25%;    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:color .2s, background .2s;    -webkit-transition:color .2s, background .2s;  }  nav ul li:not(.active):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;  }  .active{    color:rgba(55, 186, 177, 1);    background: #fff;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="bg"></div>  <section>    <nav>      <ul>        <li class="active">home</li>        <li>about</li>        <li>contact</li>        <li>store</li>      </ul>    </nav>  </section>