title: Responsive navbar menu (hamburger menu) doesn't open by clicking
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.navTrigger').click(function() {
    $(this).toggleClass('active');
    console.log("Clicked menu");
    $("#mainListDiv").toggleClass("show_list");
    $("#mainListDiv").fadeIn();
  
  });
  
  $(window).scroll(function() {
    if ($(document).scrollTop() &gt; 50) {
      $('.nav').addClass('affix');
      console.log("OK");
    } else {
      $('.nav').removeClass('affix');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;nav class="nav"&gt;
    &lt;div class="container"&gt;
      &lt;div class="logo"&gt;
        &lt;a href="#"&gt;&lt;img src="img" class="ha"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="mainListDiv" class="main_list"&gt;
        &lt;ul class="navlinks second"&gt;
          &lt;li class="a"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li class="b"&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
          &lt;li class="c"&gt;&lt;a href="#heading-three"&gt;OUR SERVICES&lt;/a&gt;&lt;/li&gt;
          &lt;li class="d"&gt;&lt;a href="#"&gt;JOBS&lt;/a&gt;&lt;/li&gt;
          &lt;li class="e"&gt;&lt;a href="#heading-two"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;span class="navTrigger"&gt;
                  &lt;i&gt;&lt;/i&gt;
                  &lt;i&gt;&lt;/i&gt;
                  &lt;i&gt;&lt;/i&gt;
          &lt;/span&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  
  
  
  
  
  &lt;nav class="nav"&gt;
    &lt;div class="container"&gt;
      &lt;div class="logo"&gt;
        &lt;a href="#"&gt;&lt;img src="chk2.png" class="hello"&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="mainListDiv" class="main_list"&gt;
        &lt;ul class="navlinks second"&gt;
          &lt;li class="a"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
          &lt;li class="b"&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
          &lt;li class="c"&gt;&lt;a href="#heading-three"&gt;OUR SERVICES&lt;/a&gt;&lt;/li&gt;
          &lt;li class="d"&gt;&lt;a href="index7.html"&gt;JOBS AT HEGTAVIC&lt;/a&gt;&lt;/li&gt;
          &lt;li class="e"&gt;&lt;a href="#heading-two"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;span class="navTrigger"&gt;
                      &lt;i&gt;&lt;/i&gt;
                      &lt;i&gt;&lt;/i&gt;
                      &lt;i&gt;&lt;/i&gt;
              &lt;/span&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>