Responsive navbar menu (hamburger menu) doesn't open by clicking

Question

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.

 $('.navTrigger').click(function() { $(this).toggleClass('active'); console.log("Clicked menu"); $("#mainListDiv").toggleClass("show_list"); $("#mainListDiv").fadeIn(); }); $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('.nav').addClass('affix'); console.log("OK"); } else { $('.nav').removeClass('affix'); } });

 .nav { width: 100%; height: 65px; position: fixed; line-height: 65px; text-align: center; z-index: 1; } .nav div.logo { float: left; width: auto; height: auto; padding-left: 0.9rem; } .nav div.logo a { text-decoration: none; color: #fff; } .nav div.logo a:hover { color: #00E676; } .nav div.main_list { height: 65px; float: right; } .nav div.main_list ul { width: 100%; height: 65px; display: flex; list-style: none; margin: 0; padding: 0; } .nav div.main_list ul li { width: auto; height: 65px; padding: 2px; padding-right: 0.9rem; } .nav div.main_list ul li a { text-decoration: none; color: #fff; line-height: 65px; font-size: 80%; font-weight: bold; } .nav div.main_list ul li a:hover { color: #00b3ee; } /* Home section */ .home { width: 100%; height: 100vh; background-position: center top; background-size: cover; } .navTrigger { display: none; } .nav { padding-top: 20px; padding-bottom: 20px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; z-index: 1; } /* Media query section */ @media screen and (min-width: 768px) and (max-width: 1024px) { .container { margin: 0; } } @media screen and (max-width:768px) { .navTrigger { display: block; } .nav div.logo { margin-left: 15px; } .nav div.main_list { width: 100%; height: 0; overflow: hidden; } .nav div.show_list { height: auto; display: none; } .nav div.main_list ul { flex-direction: column; width: 100%; height: 100vh; right: 0; left: 0; bottom: 0; background-color: #111; /*same background color of navbar*/ background-position: center top; } .nav div.main_list ul li { width: 100%; text-align: right; } .nav div.main_list ul li a { text-align: center; width: 100%; font-size: 3rem; padding: 20px; } .nav div.media_button { display: block; } } .navTrigger { cursor: pointer; width: 30px; height: 25px; margin: auto; position: absolute; right: 30px; top: 0; bottom: 0; } .navTrigger i { background-color: #fff; border-radius: 2px; content: ''; display: block; width: 100%; height: 4px; } .navTrigger i:nth-child(1) { -webkit-animation: outT 0.8s backwards; animation: outT 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navTrigger 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; } .navTrigger i:nth-child(3) { -webkit-animation: outBtm 0.8s backwards; animation: outBtm 0.8s backwards; -webkit-animation-direction: reverse; animation-direction: reverse; } .navTrigger.active i:nth-child(1) { -webkit-animation: inT 0.8s forwards; animation: inT 0.8s forwards; } .navTrigger.active i:nth-child(2) { -webkit-animation: inM 0.8s forwards; animation: inM 0.8s forwards; } .navTrigger.active i:nth-child(3) { -webkit-animation: inBtm 0.8s forwards; animation: inBtm 0.8s forwards; } @-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); } } .affix { padding: 0; background-color: #111; } .myH2 { text-align: center; font-size: 4rem; } .myP { text-align: justify; padding-left: 15%; padding-right: 15%; font-size: 20px; } @media all and (max-width:700px) { .myP { padding: 2%; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="nav"> <div class="container"> <div class="logo"> <a href="#"><img src="img" class="ha"></a> </div> <div id="mainListDiv" class="main_list"> <ul class="navlinks second"> <li class="a"><a href="#">HOME</a></li> <li class="b"><a href="#">ABOUT US</a></li> <li class="c"><a href="#heading-three">OUR SERVICES</a></li> <li class="d"><a href="#">JOBS</a></li> <li class="e"><a href="#heading-two">CONTACT US</a></li> </ul> </div> <span class="navTrigger"> <i></i> <i></i> <i></i> </span> </div> </nav> <nav class="nav"> <div class="container"> <div class="logo"> <a href="#"><img src="chk2.png" class="hello"></a> </div> <div id="mainListDiv" class="main_list"> <ul class="navlinks second"> <li class="a"><a href="#">HOME</a></li> <li class="b"><a href="#">ABOUT US</a></li> <li class="c"><a href="#heading-three">OUR SERVICES</a></li> <li class="d"><a href="index7.html">JOBS AT HEGTAVIC</a></li> <li class="e"><a href="#heading-two">CONTACT US</a></li> </ul> </div> <span class="navTrigger"> <i></i> <i></i> <i></i> </span> </div> </nav>

Answer 1

I have tried your code and modified in fallowing way. It is working fine.

$(document).ready(function(){
  $('.navTrigger').on('click',function (){
    $(this).toggleClass('active');
    console.log("Clicked menu");
    $("#mainListDiv").toggleClass("show_list");
    $("#mainListDiv").fadeIn();

  });
});