<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="navWrapper"> <div class="container"> <nav class="navbar bg-dark navbar-dark"> <a class="navbar-brand">Bootstrap Nav</a> <div class="navbar-toggler navbar-toggle" data-toggle="collapse" data-target="#toogle-navbar"> <i></i><i></i><i></i> </div> <div class="collapse navbar-collapse" id="toogle-navbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Item 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Item 1</a> </li> </ul> </div> </nav> <div class="row"> <div class="col-md-12"> <h2 class="text-center mg-t-20">Simple Hamburger Menu to X Mark Animation</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget feugiat augue. In in viverra erat. Nulla pharetra elit ut malesuada commodo. Cras scelerisque tempor tortor nec tristique. In non vulputate risus. Curabitur faucibus ornare purus. Aliquam urna risus, fringilla nec auctor sit amet, congue a elit. In hac habitasse platea dictumst. Proin semper eleifend eros vel sodales. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut venenatis nibh metus, at molestie ipsum luctus eget. Integer vel ultricies ligula. Nam luctus lacus nibh, et bibendum dui euismod et. </p> <p> Aenean ac nibh molestie tellus vulputate rhoncus sit amet eu lectus. Morbi congue sem vitae ex convallis, nec vulputate enim scelerisque. Praesent eu dui felis. Curabitur tristique dui quis orci fringilla, sed molestie arcu condimentum. Mauris vel luctus magna, id dignissim enim. Nunc eleifend fermentum urna ut lobortis. Duis mollis libero urna, at sodales leo dignissim ac. Fusce lectus libero, rutrum non lacus sed, vulputate auctor risus. Integer id magna sed ipsum blandit fermentum. Suspendisse potenti. </p> </div> </div> </div> </div>

:root { --bg: white; --nv-bg: #2FB0B5; } * { margin: 0; padding: 0; } .bg-dark { background-color: var(--nv-bg) !important; } .navWrapper .navbar-brand { color: var(--bg) !important; } .mg-t-20 { margin-top: 20px; } /*Hamburger Menu to X css*/ .navbar-toggle { width: 30px; height: 25px; cursor: pointer; } .navbar-toggle i { background: var(--bg); border-radius: 2px; width: 100%; height: 4px; content: ""; display: block; } .navbar-toggle i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navbar-toggle i:nth-child(2) { margin: 5px 0; -webkit-animation: outM 0.8s backwards; animation: outM 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navbar-toggle i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navbar-toggle.active i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; } .navbar-toggle.active i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; } .navbar-toggle.active i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; } .navbar-toggler { padding: 0; border-radius: 0; background-color: none; border: none; } @-webkit-keyframes inM { 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } } @keyframes inM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @-webkit-keyframes outM { 50% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(45deg); } } @keyframes outM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); } } @-webkit-keyframes inT { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% { -webkit-transform: translateY(9px) rotate(135deg); } } @keyframes inT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(9px) rotate(0deg); } 100% { transform: translateY(9px) rotate(135deg); } } @-webkit-keyframes outT { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(9px) rotate(0deg); } 100% { -webkit-transform: translateY(9px) rotate(135deg); } } @keyframes outT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(9px) rotate(0deg); } 100% { transform: translateY(9px) rotate(135deg); } } @-webkit-keyframes inBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } } @keyframes inBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg); } } @-webkit-keyframes outBtm { 0% { -webkit-transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(-9px) rotate(0deg); } 100% { -webkit-transform: translateY(-9px) rotate(135deg); } } @keyframes outBtm { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-9px) rotate(0deg); } 100% { transform: translateY(-9px) rotate(135deg); } }

$(function() { $('.navbar-toggle').click(function(){ $(this).toggleClass('active'); }); });