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 -->

can you post the html too pls ? From what I can see, you don't have any listeners registered on the nav links. — Bernard Pagoaga, May 03 '19 at 15:17

score 1 · Accepted Answer · answered May 03 '19 at 16:00

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>

Thank you. Your resolution works. Not sure what I missed as I'm pretty sure I commented out the IF. Thanks anyway. — jamie, May 03 '19 at 16:17

score 1 · Answer 2 · answered May 03 '19 at 16:16

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.

score 0 · Answer 3 · answered May 03 '19 at 16:08

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.

Toggle Menu won't close on nav click

3 Answers3