<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 ----------> <header class="head-main"> <div class="navbar"> <div class="container d-flex justify-content-between"> <a class="nav-button"> <span id="nav-icon3"><span></span><span></span><span></span><span></span></span> </a> <a href="#" class="navbar-brand d-flex align-items-center"> <img src="images/logo.png" class="img-fluid" alt="logo"> </a> <a href="#" class="d-flex align-items-center"> <img src="images/bag.png" class="img-fluid" alt="shop icon"> </a> </div> </div> <div class="fixed-top main-menu"> <div class="flex-center p-5"> <ul class="nav flex-column"> <li class="nav-item delay-1"><a class="nav-link" href="#">Ingredients</a></li> <li class="nav-item delay-2"><a class="nav-link" href="#">How To Make</a></li> <li class="nav-item delay-3"><a class="nav-link" href="#">Recipes</a></li> <li class="nav-item delay-3"><a class="nav-link" href="#">Compare</a></li> </ul> </div> </div> </header>

* ========================================================================== Main Nav Css Start ========================================================================== */ .navbar { height: 70px; box-shadow: 0px 5px 12px rgba(204, 204, 204, 0.75); background-color: #ffffff; } .main-menu { width: 100%; height: 100%; opacity: 0; visibility: hidden; } .nav-open .main-menu { opacity: 1; visibility: visible; background: rgba(255, 255, 255, 0.92); } .main-menu .nav li a { color: #2c2520; font-size: 20px; font-weight: 600; text-align: center; } .nav-button { position: relative; z-index: 1111; border: solid 1px #2c2520; height: 42px; display: block; width: 50px; padding: 12px; } .nav-button #nav-icon3 { width: 24px; height: 22px; display: inline-block; position: relative; cursor: pointer; } .nav-button #nav-icon3 span { display: block; position: absolute; height: 3px; width: 100%; background: #2c2520; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: 0.25s ease-in-out; -moz-transition: 0.25s ease-in-out; -o-transition: 0.25s ease-in-out; transition: 0.25s ease-in-out; } .nav-button #nav-icon3 span:nth-child(1) { top: 0; } .nav-button #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 7px; } .nav-button #nav-icon3 span:nth-child(4) { top: 14px; } .nav-open #nav-icon3 span:nth-child(1) { top: 9px; width: 0; left: 50%; } .nav-open #nav-icon3 span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .nav-open #nav-icon3 span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .nav-open #nav-icon3 span:nth-child(4) { top: 9px; width: 0; left: 50%; } .nav-open { overflow: hidden !important; display: inline-block; position: fixed; } .flex-center { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 100%; }

jQuery(document).ready(function () { //mobile-click// $(document).ready(function () { $(".nav-button").click(function () { $("body").toggleClass("nav-open"); }); }); });