MENU SIMPEL RESPONSIV

code CSS
--------------------
#menunav *{text-decoration:none;list-style:none;margin:0;padding:0;outline:none}
#menunav .section{width:100%;max-width:1200px;margin:0 auto;display:table;position:relative}
#menunav{width:100%;display:table;background-color:#fde428;margin-bottom:50px}
#menunav #logo{float:left;font-size:24px;text-transform:uppercase;color:#002e5b;font-weight:600;padding:20px 0}
#menunav nav{width:auto;float:right}
#menunav nav ul{display:table;float:right}
#menunav nav ul li{float:left}
#menunav nav ul li:last-child{padding-right:0}
#menunav nav ul li a{color:#002e5b;font-size:18px;padding:25px 20px;display:inline-block;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover{background-color:#002e5b;color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a:hover i{color:#fde428;transition:all 0.5s ease 0s}
#menunav nav ul li a i{padding-right:10px;color:#002e5b;transition:all 0.5s ease 0s}
#menunav .toggle-menu ul{display:table;width:25px}
#menunav .toggle-menu ul li{width:100%;height:3px;background-color:#002e5b;margin-bottom:4px}
#menunav .toggle-menu ul li:last-child{margin-bottom:0}
#menunav input[type=checkbox],label{display:none}
@media only screen and (max-width:1440px){#menunav .section{max-width:95%}}
@media only screen and (max-width:980px){#menunav{padding:20px 0}#menunav #logo{padding:0}#menunav input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}#menunav input[type=checkbox]:fous{background:none}#menunav label{float:right;padding:8px 0;display:inline-block;cursor:pointer}#menunav input[type=checkbox]:checked ~ nav{display:block}#menunav nav{display:none;position:absolute;right:0;top:53px;background-color:#002e5b;padding:0;z-index:99}#menunav nav ul{width:auto}#menunav nav ul li{float:none;padding:0;width:100%;display:table}#menunav nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}#menunav nav ul li a i{color:#fde428;padding-right:13px}}
@media only screen and (max-width:480px){#menunav .section{max-width:90%}}
@media only screen and (max-width:360px){#menunav label{padding:5px 0}#menunav #logo{font-size:20px}#menunav nav{top:47px}}
--------------------------------------
code html
-----------------
<div id="menunav">
  <div class="section">
  <a href="http://isam69.blogspot.co.id/" id="logo" target="_blank">Logo Kalian</a>
  <label for="toggle-1" class="toggle-menu">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  </label>
  <input type="checkbox" id="toggle-1"/>
  <nav>
    <ul>
 
   
      <li><a href="#portfolio"><i class="fa fa-gavel"></i>Hardware</a></li>
      <li><a href="#gallery"><i class="fa fa-picture-o"></i>Gallery</a></li>
   
    </ul>
  </nav>
  </div>

</div>