Flexbox Based Navigation part 1

1. buat widget baru

2. kopas semua scrip berikut ke widget baru

3. save dan lihat hasilnya

scripnya

<!-- CSS --> <style type='text/css'> 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 .demo li{opacity:1;visibility:visible;transition:all .7s linear}nav#menunav #checkbox1:checked + label .demo{height:200px}nav#menunav .menu{border-radius:0;border-top-left-radius:5px;border-top-right-radius:5px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;height:0;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 .demo{background:#625b60} nav#menunav .demo li a{color:#fff} nav#menunav .demo li a:hover{background:#6d6268} </style> <!-- HTML --> <nav id="menunav"> <input type="checkbox" id="checkbox1" /> <label for="checkbox1"> <ul class="menu demo"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">FAQ</a></li> </ul> <span class="toggle">☰</span> </label> </nav>

hasilnya