Open menu when it clicked

Question

In my website, I have a menu open when users click to toggle. It works fine when I click a link that moves to a particular section. What I want is when the user clicks a link close menu and view toggle. I able to do that but I can't open the menu again by clicking toggle again. Here is what done. When I click to toggle it is not view my menu.

 $(function() { $('.hamburger-menu').on('click', function(){ $('.toggle').toggleClass('open'); $('.nav-list').toggleClass('open'); }) }) $(function() { $('.nav-list>li>a').on('click', function(){ $('.nav-list').toggleClass('hide'); $('.toggle').toggleClass('open'); }); })

 header { width: 100%; height: 100vh; background: linear-gradient(rgba(16,29,44,.88), rgba(16,29,44,.88)), background-size: cover; position: relative; } header > .container { position: relative; height: 100%; padding: 0; } .navbar-brand { position: absolute; width: 100%; max-width: 100px; top: 10px; left: 50%; transform: translateX(-50%); transition: opacity 650ms; } .navbar-brand:hover{ opacity: .8; } .hamburger-menu, .hamburger-home{ position: fixed; top: 25px; right: 15px; width: 50px; height: 50px; display: flex; background-color: #101D2C; border-radius: 4px; cursor: pointer; z-index: 999; } .hamburger-menu i, .hamburger-home i { font-size: 30px; color: white; margin: auto; } .hamburger-menu .fa-times{ display: none; } .hamburger-menu .fa-times.open { display: block; } .hamburger-menu .fa-bars.open{ display: none; } .nav-list { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; list-style: none; background-color: #101D2C; z-index: 900; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: scale(0); transition: opacity 650ms; } .nav-list.open { opacity: 1; transform: scale(1); } .nav-list.hide { opacity: 0; } .hero-text { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -45%); text-align: center; } .hero-text h1 { display: inline-block; font-family: "Niconne", cursive; color: #c69963; text-shadow: 3px 3px 4px #40413f; animation: hero 3.2s ease .5s; } .hero-text p { font-family: 'Pangolin' ,cursive; animation: long 3s ease; position: relative; } @keyframes long { from { left: 50%; transform: translate(50%); } to { left: 50%; transform: translate(-50%); } } .btn { width: 100px; padding: 5px 0!important; border: 1px solid #c69963; position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent); transition: all 650ms; } .btn:hover::before { left: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <a href="#home"> <div class="hamburger-home d-none d-lg-flex d-md-flex"> <i class="fas fa-home toggle"></i> </div> </a> <div class="hamburger-menu"> <i class="fa fa-bars toggle"></i> <i class="fa fa-times toggle"></i> </div> <nav class="d-flex align-items-center justify-content-center justify-content-lg-between"> <ul class="nav-list text-center p-0"> <li class="nav-item"> <a class="nav-link" href="#home">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#products">PRODUCTS</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">LOGIN</a> </li> </ul> </nav> <div class="hero-text w-100 text-white px-2 px-sm-0"> <p class="lead mb-4"> Most large enterprises have application running on-prem and on the cloud, due to inherent complex nature of networking customers are not reaping the full potential of their investments as most features are not fully utilized. At NadaLabs, we fulfill this gap for on-premise and cloud-based software that allow you to unlock the full ability of these features </p> <!-- <a class="btn px-5 mr-2" href="#">Explore</a> <a class="btn px-5 ml-2" href="#products">Products</a> --> </div> </div>

Answer 1

You basically want the links clicked to replicate the behaviour of the hamburger menu click, why not just have it perform the same action?

 $(function() { $('.hamburger-menu, .nav-list>li>a').on('click', function(){ $('.toggle').toggleClass('open'); $('.nav-list').toggleClass('open'); }) })

 header { width: 100%; height: 100vh; background: linear-gradient(rgba(16,29,44,.88), rgba(16,29,44,.88)), background-size: cover; position: relative; } header > .container { position: relative; height: 100%; padding: 0; } .navbar-brand { position: absolute; width: 100%; max-width: 100px; top: 10px; left: 50%; transform: translateX(-50%); transition: opacity 650ms; } .navbar-brand:hover{ opacity: .8; } .hamburger-menu, .hamburger-home{ position: fixed; top: 25px; right: 15px; width: 50px; height: 50px; display: flex; background-color: #101D2C; border-radius: 4px; cursor: pointer; z-index: 999; } .hamburger-menu i, .hamburger-home i { font-size: 30px; color: white; margin: auto; } .hamburger-menu .fa-times{ display: none; } .hamburger-menu .fa-times.open { display: block; } .hamburger-menu .fa-bars.open{ display: none; } .nav-list { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; list-style: none; background-color: #101D2C; z-index: 900; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: scale(0); transition: opacity 650ms; } .nav-list.open { opacity: 1; transform: scale(1); } .nav-list.hide { opacity: 0; } .hero-text { position: absolute; top: 45%; left: 50%; transform: translate(-50%, -45%); text-align: center; } .hero-text h1 { display: inline-block; font-family: "Niconne", cursive; color: #c69963; text-shadow: 3px 3px 4px #40413f; animation: hero 3.2s ease .5s; } .hero-text p { font-family: 'Pangolin' ,cursive; animation: long 3s ease; position: relative; } @keyframes long { from { left: 50%; transform: translate(50%); } to { left: 50%; transform: translate(-50%); } } .btn { width: 100px; padding: 5px 0!important; border: 1px solid #c69963; position: relative; overflow: hidden; } .btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .3), transparent); transition: all 650ms; } .btn:hover::before { left: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"/> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <a href="#home"> <div class="hamburger-home d-none d-lg-flex d-md-flex"> <i class="fas fa-home toggle"></i> </div> </a> <div class="hamburger-menu"> <i class="fa fa-bars toggle"></i> <i class="fa fa-times toggle"></i> </div> <nav class="d-flex align-items-center justify-content-center justify-content-lg-between"> <ul class="nav-list text-center p-0"> <li class="nav-item"> <a class="nav-link" href="#home">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="#about">ABOUT</a> </li> <li class="nav-item"> <a class="nav-link" href="#products">PRODUCTS</a> </li> <li class="nav-item"> <a class="nav-link" href="#contact">LOGIN</a> </li> </ul> </nav> <div class="hero-text w-100 text-white px-2 px-sm-0"> <p class="lead mb-4"> Most large enterprises have application running on-prem and on the cloud, due to inherent complex nature of networking customers are not reaping the full potential of their investments as most features are not fully utilized. At NadaLabs, we fulfill this gap for on-premise and cloud-based software that allow you to unlock the full ability of these features </p> <!-- <a class="btn px-5 mr-2" href="#">Explore</a> <a class="btn px-5 ml-2" href="#products">Products</a> --> </div> </div>