Menu live example
<header class="side-menu-header" data-menu-anima="default"> <div class="navbar-header"> <a class="hamburger-button" data-menu-anima="fade-left"> <i class="fa fa-bars"></i> </a> <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" /></a> </div> <div class="side-menu-fixed"> <div class="top-area"> <a class="brand" href="index.html"> <img src="images/logo.png" alt="logo"> </a> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-sm" type="submit">GO</button> </span> </div> </form> </div> <aside class="sidebar mi-menu box-middle-container"> <nav class="sidebar-nav box-middle"> <ul class="side-menu ms-simple"> <li> <a href="#"> <i class="fa fa-home"></i> Home </a> </li> <li> <a href="#"> <i class="fa fa-book"></i> Portfolio </a> </li> <li> <a href="#"> <i class="fa fa-info"></i> About </a> </li> <li> <a href="#"> <i class="fa fa-share"></i> Services </a> </li> <li> <a href="#"> <i class="fa fa-users"></i> Team </a> </li> </ul> </nav> </aside> <div class="bottom-area"> <div class="social-group"> <a target="_blank" href="#"><i class="fa fa-facebook-square"></i></a> <a target="_blank" href="#"><i class="fa fa-twitter-square"></i></a> <a target="_blank" href="#"><i class="fa fa-instagram"></i></a> <a target="_blank" href="#"><i class="fa fa-youtube-square"></i></a> </div> <p>© Copyright 2018. All rights reserved. </p> </div> </div> </header>