<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="nav-icon"> <span></span> <span></span> <span></span> </div>

#nav-icon { width: 55px; height: 45px; position: relative; margin: 50px auto; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } #nav-icon span { display: block; position: absolute; height: 5px; width: 100%; background: #000; border-radius: 40px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } #nav-icon span:nth-child(1) { top: 0px; } #nav-icon span:nth-child(2) { top: 15px; } #nav-icon span:nth-child(3) { top: 30px; } #nav-icon.open span:nth-child(1) { top: 18px; transform: rotate(135deg); } #nav-icon.open span:nth-child(2) { opacity: 0; left: -60px; } #nav-icon.open span:nth-child(3) { top: 18px; transform: rotate(-135deg); }

$(document).ready(function(){ $('#nav-icon').click(function(){ $(this).toggleClass('open'); }); });