title: Responsive mobile device menu will not hide on click
body: <p>I have a menu based on the Webdevkit Responsive menu.
  The menu is controlled by a Jquery and I am trying to modify the code so that on the mobile menu when the Hamburger icon is first clicked it changes to an 'X',
  then when an item on the mobile menu is clicked the menu is hidden and the 'X' changes back to the Hamburger symbol, and when the hanburger symbol is pclicked the process is repeated.</p>
  <p>I have read several articles on this and believe I need to add a class to the HREF, this I have done but have failed to work out the correct(jquery) statement to achieve the above.</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>/** code by webdevtrick ( https://webdevtrick.com ) **/
  (function($) { 
    $(function() { 
      $('nav ul li a:not(:only-child)').click(function(e) {
        $(this).siblings('.nav-dropdown').toggle();
        $('.nav-dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
      });
      $('html').click(function() {
        $('.nav-dropdown').hide();
      });
      
      /* create mobile dropdown menu */
       $('#nav-toggle').click(function() {
        $('nav ul').slideToggle();
      });  
      
    
      $('a.mmenu').click(function() {
          $('#nav-toggle').toggleClass('active');
          $('.nav-mobile').toggleClass('hide'); 
      });
       
     $('#nav-toggle').on('click', function() {
        this.classList.toggle('active');
      }); 
      
    }); 
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> &lt;style type="text/css"&gt;
      body {
      margin: 0;
      padding: 0;
      }
     {
       font-family: 'Righteous', cursive;  
      }
      .nav-bar {
        height: 70px;
         background: #262626;
      }
   
       .brand {
   
        display: none;
      }
  .brand a img {
      max-height: 70px;
  }
  .brand a,
  .brand a:visited {
    color: #ffffff;
    text-decoration: none;
  }
   
  .nav-container {
    max-width: 1000px;
    margin: 0 auto;
  }
   
   /* position navbar items */
  nav {
    
    float: center ;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    float: left;
    position: relative;
  }
  nav ul li a,
  nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 70px;
    background: #262626;
    color: #ffffff;
    text-decoration: none;
  }
  nav ul li a:hover,
  nav ul li a:visited:hover {
    background: #2ab1ce;
    color: #ffffff;
  }
  nav ul li a:not(:only-child):after,
  nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
  }
  nav ul li ul li {
    min-width: 190px;
  }
  nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
  }
   
  .nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  }
  .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #262626;
    height: 70px;
    width: 70px;
  }
   
  @media only screen and (max-width: 798px) {
    .nav-mobile {
      display: block;
    }
   
    nav {
      width: 100%;
      padding: 70px 0 15px;
    }
    nav ul {
      display: none;
    }
    nav ul li {
      float: none;
    }
    nav ul li a {
      padding: 15px;
      line-height: 20px;
      padding-left: 25%;
       
    }
    nav ul li ul li a {
      padding-left: 30%;
    }
   
    .nav-dropdown {
      position: static;
    }
    .brand {
         position: absolute;
          padding-left: 20px;
         float: left;
         line-height: 70px;
         text-transform: uppercase;
          font-size: 1.4em; 
        display: block;
    }
      .brand a img {
          max-height: 60px;
          margin-top: 5px;
          display: block;
          
      }
  }
  @media screen and (min-width: 799px) {
    .nav-list {
      display: block !important;
    }
  }
  #nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
  }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  #nav-toggle span:before {
    top: -10px;
  }
  #nav-toggle span:after {
    bottom: -10px;
  }
  #nav-toggle.active span {
    background-color: transparent;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
  }
  #nav-toggle.active span:before {
    transform: rotate(45deg);  
  }
  #nav-toggle.active span:after {
     transform: rotate(-45deg); 
    
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
   
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Responsive Dropdown nav-bar Bar&lt;/title&gt;
   &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
       &lt;link href="https://fonts.googleapis.com/css?family=Righteous&amp;display=swap" rel="stylesheet"&gt;  
        &lt;link rel="stylesheet" href="media/idea3.css"&gt;
  &lt;/head&gt;
   
  &lt;body&gt;
   
    &lt;section class="nav-bar"&gt;
    &lt;div class="nav-container"&gt;
      &lt;div class="brand"&gt;
        &lt;a href=""&gt;MENU&lt;/a&gt;
      &lt;/div&gt;
      &lt;nav&gt;
        &lt;div class="nav-mobile"&gt;&lt;a id="nav-toggle" href="#!"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;ul class="nav-list"&gt;
          &lt;li&gt;
            &lt;a class="mmenu" href="#"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="mmenu" href="#"&gt;News&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class="mmenu" href="#"&gt;Projects&lt;/a&gt;
            &lt;ul class="nav-dropdown"&gt;
              &lt;li&gt;
                &lt;a class="mmenu" href="#"&gt;Project 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class="mmenu" href="#"&gt;Project 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class="mmenu" href="#"&gt;Project3&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;li&gt;
            &lt;a clas="mmenu" href="#"&gt;About&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/section&gt;
   
    &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script  src="media/idea4.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
   
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help or ideas on the way forward would be appreciated.</p>
  <pre><code>&lt;style type=&quot;text/css&quot;&gt;
      body {
      margin: 0;
      padding: 0;
      }
     {
       font-family: 'Righteous', cursive;  
      }
      .nav-bar {
        height: 70px;
         background: #262626;
      }
   
       .brand {
   
        display: none;
      }
  .brand a img {
      max-height: 70px;
  }
  .brand a,
  .brand a:visited {
    color: #ffffff;
    text-decoration: none;
  }
   
  .nav-container {
    max-width: 1000px;
    margin: 0 auto;
  }
   
   /* position navbar items */
  nav {
    
    float: center ;
  }
  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    float: left;
    position: relative;
  }
  nav ul li a,
  nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 70px;
    background: #262626;
    color: #ffffff;
    text-decoration: none;
  }
  nav ul li a:hover,
  nav ul li a:visited:hover {
    background: #2ab1ce;
    color: #ffffff;
  }
  nav ul li a:not(:only-child):after,
  nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    content: ' ▾';
  }
  nav ul li ul li {
    min-width: 190px;
  }
  nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
  }
   
  .nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  }
  .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: #262626;
    height: 70px;
    width: 70px;
  }
   
  @media only screen and (max-width: 798px) {
    .nav-mobile {
      display: block;
    }
   
    nav {
      width: 100%;
      padding: 70px 0 15px;
    }
    nav ul {
      display: none;
    }
    nav ul li {
      float: none;
    }
    nav ul li a {
      padding: 15px;
      line-height: 20px;
      padding-left: 25%;
       
    }
    nav ul li ul li a {
      padding-left: 30%;
    }
   
    .nav-dropdown {
      position: static;
    }
    .brand {
         position: absolute;
          padding-left: 20px;
         float: left;
         line-height: 70px;
         text-transform: uppercase;
          font-size: 1.4em; 
        display: block;
    }
      .brand a img {
          max-height: 60px;
          margin-top: 5px;
          display: block;
          
      }
  }
  @media screen and (min-width: 799px) {
    .nav-list {
      display: block !important;
    }
  }
  #nav-toggle {
    position: absolute;
    left: 18px;
    top: 22px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
  }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #ffffff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  #nav-toggle span:before {
    top: -10px;
  }
  #nav-toggle span:after {
    bottom: -10px;
  }
  #nav-toggle.active span {
    background-color: transparent;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
  }
  #nav-toggle.active span:before {
    transform: rotate(45deg);  
  }
  #nav-toggle.active span:after {
     transform: rotate(-45deg); 
    
   
  }
  &lt;html&gt;
   
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Responsive Dropdown nav-bar Bar&lt;/title&gt;
   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt; 
       &lt;link href=&quot;https://fonts.googleapis.com/css?family=Righteous&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;  
        &lt;link rel=&quot;stylesheet&quot; href=&quot;media/idea3.css&quot;&gt;
  &lt;/head&gt;
   
  &lt;body&gt;
   
    &lt;section class=&quot;nav-bar&quot;&gt;
    &lt;div class=&quot;nav-container&quot;&gt;
      &lt;div class=&quot;brand&quot;&gt;
        &lt;a href=&quot;&quot;&gt;MENU&lt;/a&gt;
      &lt;/div&gt;
      &lt;nav&gt;
        &lt;div class=&quot;nav-mobile&quot;&gt;&lt;a id=&quot;nav-toggle&quot; href=&quot;#!&quot;&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;ul class=&quot;nav-list&quot;&gt;
          &lt;li&gt;
            &lt;a class=&quot;mmenu&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class=&quot;mmenu&quot; href=&quot;#&quot;&gt;News&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a class=&quot;mmenu&quot; href=&quot;#&quot;&gt;Projects&lt;/a&gt;
            &lt;ul class=&quot;nav-dropdown&quot;&gt;
              &lt;li&gt;
                &lt;a class=&quot;mmenu&quot; href=&quot;#&quot;&gt;Project 1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class=&quot;mmenu&quot; href=&quot;#&quot;&gt;Project 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class=&quot;mmenu&quot; href=&quot;#&quot;&gt;Project3&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;
          &lt;li&gt;
            &lt;a clas=&quot;mmenu&quot; href=&quot;#&quot;&gt;About&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  &lt;/section&gt;
   
    &lt;script src=&quot;http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script  src=&quot;media/idea4.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
   
  &lt;/html&gt;
  /** code by webdevtrick ( https://webdevtrick.com ) **/
  (function($) { 
    $(function() { 
      $('nav ul li a:not(:only-child)').click(function(e) {
        $(this).siblings('.nav-dropdown').toggle();
        $('.nav-dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
      });
      $('html').click(function() {
        $('.nav-dropdown').hide();
      });
      
      /* create mobile dropdown menu */
       $('#nav-toggle').click(function() {
        $('nav ul').slideToggle();
      });  
      
    
      $('a.mmenu').click(function() {
          $('#nav-toggle').toggleClass('active');
          $('.nav-mobile').toggleClass('hide'); 
      });
       
     $('#nav-toggle').on('click', function() {
        this.classList.toggle('active');
      }); 
      
    }); 
  })(jQuery);
  </code></pre>