Bootstrap 3 Hide Dropdown Menu on Menu Item Click

Question

Check out the fiddle. I have a basic Bootstrap 3 responsive nav like so:

    

        &         


        
      

Answer 1

If need to fix this on bootstrap 4, try this jquery snippet. It works in this way: If navbar is expanded, nothing happens, (normal bootstrap behavior). If navbar is collapsed, after a click event, closes the navbar. Works on bootstrap 4

  $(".navbar a").click(function(event) {
      // check if window is small enough so dropdown is created
      var toggle = $(".navbar-toggler").is(":visible");
      if (toggle) {
          $(".navbar-collapse").collapse('hide');
      }
  });