Toggle Menu won't close on nav click

Question

As the title says.

The menu open as expected, it closes as expected IF YOU CLICK THE CLOSE button.

But once the menu is open, when you click on any of the nav links, the menu won't close, irrespective of the screen-size/device.

I have tried removing this part if (windowWidth <= 767) { but it made no difference.

Any advice?

/*===============================================
    Toggle Menu
  ===============================================*/
  var menu = $(".menu");
  var toggleBtn = $(".toggle-btn");

  toggleBtn.on("click", function(e) {
    if (menu.hasClass("show-menu")) {
      menu.removeClass("show-menu");
    }
    else {
      menu.addClass("show-menu");
    }
    e.stopPropagation();
  });

  // Navicon transform into X //
  toggleBtn.on("click", function() {
    if (toggleBtn.hasClass("toggle-close")) {
      toggleBtn.removeClass("toggle-close");
    }
    else {
      toggleBtn.addClass("toggle-close");
    }
  });

  // Close Menu
  if (windowWidth <= 767) {
    $(document).on("click", function() {
      if (menu.hasClass("show-menu")) {
        menu.removeClass("show-menu");
      }
      if (toggleBtn.hasClass("toggle-close")) {
        toggleBtn.removeClass("toggle-close");
      }

    });
  }

Here's the html:

  <!-- Toggle Menu -->
      <button class="toggle-btn">
        <span class="lines"></span>
      </button>
      <div class="menu">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#education">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#experience">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonial">Personality</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- end Toggle menu -->

Answer 1

var menu = $(".menu");
  var toggleBtn = $(".toggle-btn");

  toggleBtn.on("click", function(e) {
    menu.toggleClass();
  });

  $(".nav-link").on('click',function(e){
  menu.toggleClass();
})

.menu{
  visibility:hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-btn">

        <span class="lines">Nav</span>
      </button>
      <div class="menu">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#education">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#experience">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonial">Personality</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
      </div>

Not quite sure about your demand. As I understand, you wanna click the button to show the menu. Click the navi item to redirect to the specific page and hide the menu.

Answer 2

Change the code like below for mobile :

$(document).on('click touchstart', function () {

Try the below css for iphone :

<style>
    .nav-link
    {
         cursor: pointer;
    }
</style>

Check the link $(document).click() not working correctly on iPhone. jquery for more details.

Answer 3

You say that you have tried it without if (windowWidth <= 767) and it did't work. Well, all I did was remove this if and now it works. You probably have or had another bug that was or is preventing it from working correctly.

/*===============================================
    Toggle Menu
  ===============================================*/
  var menu = $(".menu");
  var toggleBtn = $(".toggle-btn");

  toggleBtn.on("click", function(e) {
    if (menu.hasClass("show-menu")) {
      menu.removeClass("show-menu");
    }
    else {
      menu.addClass("show-menu");
    }
    e.stopPropagation();
  });

  // Navicon transform into X //
  toggleBtn.on("click", function() {
    if (toggleBtn.hasClass("toggle-close")) {
      toggleBtn.removeClass("toggle-close");
    }
    else {
      toggleBtn.addClass("toggle-close");
    }
  });

  // Close Menu
  //if (window.width <= 767) {  <-- does not work with this
    $(document).on("click", function() {
      if (menu.hasClass("show-menu")) {
        menu.removeClass("show-menu");
      }
      if (toggleBtn.hasClass("toggle-close")) {
        toggleBtn.removeClass("toggle-close");
      }

    });
  //}

.menu {
  display: none;
}

.show-menu {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="toggle-btn">
        Toggle
      </button>
      <div class="menu">
        <ul class="nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#education">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#experience">Skills</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#portfolio">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Education</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonial">Personality</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>