menu Responsif Sederhana

langkah ( 1 )
pertama tama buka menu bog shobat buka edit html cari code */]]></b:skin>
copy CSS dibawah ini lalu pastekan tepat sebelum code */]]></b:skin>
CONTOH ..............paste disini*/]]></b:skin>


*-----------------------css-menu-kana-isam69--------------------------*

{

  font-family: 'Open Sans', sans-serif;

  margin: 0;

  padding: 0;

  position: relative;

  line-height: normal;

}

nav#menunav {

  margin: 0 auto;

  max-width: 700px;

  width: 95%;

}



nav#menunav #checkbox1,

nav#menunav .toggle {

  display: none;

}



nav#menunav .menu {

  padding: 0;

  margin: 0;

  max-width: 700px;

  height: 50px;

  border-radius: 5px;

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

  list-style-type: none;

}



nav#menunav .menu li a {

  text-decoration: none;

  align-self: center;

  border-radius: 5px;

  font-size: 14px;

  padding: 10px 15px;

  transition: background .2s linear;

}



@media screen and (max-width: 600px) {

  nav#menunav .menu li a {

    font-size: 13px;

  }

}



@media screen and (max-width: 550px) {

  nav#menunav .toggle {

    clear: both;

    display: block;

    text-align: center;

    font-size: 14px;

    line-height: 40px;

    cursor: pointer;

    width: 100%;

    height: 40px;

    font-size: 18px;

    color: #595959;

    background: #dbdbdb;

    border-bottom-left-radius: 5px;

    border-bottom-right-radius: 5px;

    transition: all .1s linear;

  }

  nav#menunav .toggle:hover {

    background: #cecece;

  }

  nav#menunav #checkbox1:checked + label .isam69 li {

    opacity: 1;

    visibility: visible;

    transition: all .7s linear;

  }



  nav#menunav #checkbox1:checked + label .isam69 {

    height: 70px;

  }

  nav#menunav .menu {

    border-radius: 0px;

    border-top-left-radius: 5px;

    border-top-right-radius: 5px;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    align-items: center;

    height: 0px;

    transition: height .3s linear;

  }

  nav#menunav .menu li {

    display: flex;

    /* magic */

    align-self: center;

    width: 95%;

    opacity: 0;

    visibility: hidden;

  }

  nav#menunav .menu li a {

    width: 95%;

    text-align: center;

    align-self: center;

    align-content: center;

  }

}



nav#menunav .isam69 {

  background: #3CB371;

}



nav#menunav .isam69 li a {

  color: #fff;

}



nav#menunav .isam69 li a:hover {

  background: #4B0082;

}

p{

  width:100%;

  display:block;

  text-align:center;

  font-size:200%

}

langkah ( 2 )
copy html di bawah ini lalu pastekan tepat di bawah barisan code
<aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
tetapi terserah shobat mau di letak di posisi mana saja intinya di dalam lingkungan code body
atau di dalam lingkungan header

<nav id="menunav">
    <input type="checkbox" id="checkbox1" />
    <label for="checkbox1"><ul class="menu isam69">
  <li><a href="#"><b>NETWORK</b></a></li>  
  <li><a href="#"><b>HARDWARE</b></a></li>  
  <li><a href="#"><b>SOFTWARE</b></a></li>  
</ul>
  <span class="toggle">☰</span>
  </label>
</nav>

selsmst mencoba dan selamat berekreasi semoga sukses

salam persahabata by isam sibujangkelana