Navigation menu dropdown top level doesn't work

Question

I have a dropdown menu with top level and two sub levels. The thing is that the sub levels work just fine, I can click on them and it takes me to the page I selected. The problem is with the top level, when I hover over it it displays the submenus but when I click on it it doesn't take me to the page.

var menu_Sub = $(".menu-has-sub");
var menu_Sub_Li;
$(".mobile-device .menu-has-sub").find(".fa:first").removeClass("fa-angle-right").addClass("fa-angle-down");
menu_Sub.click(function() {
  if ($(".header").hasClass("mobile-device")) {
    menu_Sub_Li = $(this).parent("li:first");
    if (menu_Sub_Li.hasClass("menu-opened")) {
      menu_Sub_Li.find(".sub-dropdown:first").slideUp(function() {
        menu_Sub_Li.removeClass("menu-opened");
        menu_Sub_Li.find(".menu-has-sub").find(".fa:first").removeClass("fa-angle-up").addClass("fa-angle-down");
      });
    } else {
      $(this).find(".fa:first").removeClass("fa-angle-down").addClass("fa-angle-up");
      menu_Sub_Li.addClass("menu-opened");
      menu_Sub_Li.find(".sub-dropdown:first").slideDown();
    }
    return false;
  } else {
    return false;
  }
});
menu_Sub_Li = menu_Sub.parent("li");
menu_Sub_Li.hover(function() {
  if (!($(".header").hasClass("mobile-device"))) {
    $(this).find(".sub-dropdown:first").stop(true, true).fadeIn("fast");
  }
}, function() {
  if (!($(".header").hasClass("mobile-device"))) {
    $(this).find(".sub-dropdown:first").stop(true, true).delay(100).fadeOut("fast");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-menu">
  <ul class="nav-menu-inner">
    <li>
      <a href="connexion">Home</a>
    </li>
    <li>
      <a class="menu-has-sub" href="about-us">About us <i class="fa fa-angle-down"></i></a>
      <!-- Dropdown -->
      <ul class="sub-dropdown dropdown">
        <li>
          <a class="menu-has-sub" href="clients-case-studies">Clients and Case Studies</a>

        </li>
      </ul>
      <!-- End Dropdown -->

Any help would be appreciated. Thank you.

Please also post your css, it's key to this issue. – Nathaniel Flick May 09 '17 at 03:26 — Nathaniel Flick, May 09 '17 at 03:26

score 1 · Accepted Answer · edited May 23 '17 at 12:10

The problem arises in your return false call at the end of your first if statement:

menu_Sub.click(function () {
if ($(".header").hasClass("mobile-device")) {
    menu_Sub_Li = $(this).parent("li:first");
    if (menu_Sub_Li.hasClass("menu-opened")) {
...
}
else {
    return false;  // this prevents the default click action from occuring
}
});

What you are saying here is basically, if I click on the .menu-has-sub link and it doesn't have a .mobile-device class, I want it to return false.

That essentially means event.preventDefault() - read this SO answer for a great explanation event.preventDefault() vs. return false

But that seems to be your problem, be careful when preventing the default action on links, if you want them to go somewhere.

Here is a fiddle with the line commented out.

That was it! Thank you very much! I'll take a look at the link. — dileoh, May 09 '17 at 04:17
Thanks @dileoh - if that was able to answer your question, I'd love it if you could upvote and accept the answer — Brett East, May 09 '17 at 04:42

Navigation menu dropdown top level doesn't work

1 Answers1