html - Make CSS navigation bar 'responsive' so whatever the screen size the li elements scale -

this website has loads of list items. code, when resize browser, other elements scale navigation bar , list items not , looks odd.

here css:

.top-nav{  display:inline-block;  } .top-nav ul li{  display:inline-block; } .top-nav ul li a{  font-family: 'karla', sans-serif; color: #f8abbe; text-transform: uppercase; padding: 45px 25px; display: inline-block; font-weight: normal; transition: 0.5s ease; -o-transition: 0.5s ease; -webkit-transition: 0.5s ease;  }   .top-nav li.active> a, .top-nav li> a:hover { background: #f8abbe; color:#fff; } 

and here html:

<div class="header">         <div class="wrap">          <div class="top-nav">             <ul>                 <li class="active"><a href="index.html">home</a></li>                 <li><a href="about.html">about</a></li>                 <li><a href="services.html">prices & services</a></li>                 <li><a href="training.html">training</a></li>                 <li><a href="training.html">press</a></li>                  <li><a href="training.html">makeup studio <span class="arrow">&#9660;</span></a></li>                 <li><a href="contact.html">contact us</a></li>             </ul>         </div>         <div class="clear"> </div>     </div> </div> 

i make horizontal navigation bar more responsive , scale better. thanks!

this solution taken directly first result on google (when searching "responsive navigation bar")

/* toggle between adding , removing "responsive" class topnav when user clicks on icon */  function myfunction() {      var x = document.getelementbyid("mytopnav");      if (x.classname === "topnav") {          x.classname += " responsive";      } else {          x.classname = "topnav";      }  }

.top-nav{    display:inline-block;    }  .top-nav ul li{    display:inline-block;  }  .top-nav ul li a{    font-family: 'karla', sans-serif;  color: #f8abbe;  text-transform: uppercase;  padding: 45px 25px;  display: inline-block;  font-weight: normal;  transition: 0.5s ease;  -o-transition: 0.5s ease;  -webkit-transition: 0.5s ease;    }    .top-nav li.active> a, .top-nav li> a:hover {  background: #f8abbe;  color:#fff;  }      /* style links inside list items */  ul.topnav li {      display: inline-block;      text-align: center;      padding: 14px 16px;      text-decoration: none;      transition: 0.3s;      font-size: 14px;  }    /* hide list item contains link should open , close topnav on small screens */  ul.topnav li.icon {display: none;}     /* when screen less 680 pixels wide, hide list items, except first 1 ("home"). show list item contains link open , close topnav (li.icon) */  @media screen , (max-width:680px) {    ul.topnav li:not(:first-child) {display: none;}    ul.topnav li.icon {      float: right;      display: inline-block;    }  }    /* "responsive" class added topnav javascript when user clicks on icon. class makes topnav on small screens */  @media screen , (max-width:680px) {    ul.topnav.responsive {position: relative;}    ul.topnav.responsive li.icon {      position: absolute;      right: 0;      top: 0;    }    ul.topnav.responsive li {      float: none;      display: inline;    }    ul.topnav.responsive li {      display: block;      text-align: left;    }  }

<div class="header">          <div class="wrap">          <div class="top-nav">  <ul class="topnav" id="mytopnav">  <li class="active"><a href="index.html">home</a></li>                  <li><a href="about.html">about</a></li>                  <li><a href="services.html">prices & services</a></li>                  <li><a href="training.html">training</a></li>                  <li><a href="training.html">press</a></li>                   <li><a href="training.html">makeup studio <span class="arrow">&#9660;</span></a></li>                  <li><a href="contact.html">contact us</a></li>    <li class="icon">      <a href="javascript:void(0);" style="font-size:15px;" onclick="myfunction()">☰</a>    </li>  </ul>  </div>  <div class="clear"> </div>      </div>  </div>

source