Как сделать hamburger menu?

<div class="menu-main navbar navbar-light">
        <button class="navbar-toggler hidden-sm-up" 
                type="button" 
                data-toggle="collapse" 
                data-target="#navbarResponsive" 
                aria-controls="navbarResponsive" 
                aria-expanded="false" 
                aria-label="Toggle navigation"></button>
      <div class="collapse navbar-toggleable-xs" id="navbarResponsive"></div>
      <ul class="nav navbar-nav">
        <li class="nav-item"><a class="nav-link" href="">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="" class="current">Products</a></li>
        <li class="nav-item"><a class="nav-link" href="">Contacts</a></li>
        <li class="nav-item"><a class="nav-link" href="">User Guide & FAQS</a></li>
      </ul>
    </div>