title: Bootstrap menu won't close on touch devices
body: <p>Pulling my hair out trying to get this working.
  Responsive menu works fine when browser is scaled down to mobile size, ie, clicking a link closes the menu and page scrolls to correct section. When I enable touch emulation however in Google dev tools, I can see that data-toggle="collapse" is not being fired, so menu stays open upon click. Now, here's the thing, I bought a theme and there is a fair bit of extra js written by whoever created it that is more than likely causing the issue. Theme is no longer supported so I'm really stuck.</p>
  
  <p>My menu code:</p>
  
  <pre><code>&lt;div class="header" id="header"&gt;
  
    &lt;div class="navbar-wrapper" id="navigation" role="navigation"&gt;
  
      &lt;div class="navbar navbar-inverse"&gt;
  
        &lt;div class="container"&gt;
  
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-down"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt; 
           &lt;/button&gt;
  
              &lt;a class="navbar-brand brand-container " href="#home" title="CandyPOP!" rel="home" id="brand" &gt; &lt;img src="img/logocp1bcolour2.png" alt="CandyPOP logo" class="firstb" width="160"&gt; 
          &lt;!-- logo to display on scrolling --&gt; 
              &lt;img src="img/logocp1bcolour2.png" alt="CandyPOP logo" class="last" width="160"&gt; &lt;/a&gt;
  
          &lt;div class="navbar-collapse collapse" id="navbar-collapse-down"&gt;
  
            &lt;ul id="nav" class="nav navbar-nav"&gt;
              &lt;li class ="active"&gt;&lt;a href="#home" data-spy="#home" data-toggle="collapse" data-target="#navbar-collapse-down"&gt;Home&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#portfolio" data-spy="#portfolio" data-toggle="collapse" data-target="#navbar-collapse-down"&gt;Line Up&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tickets" class="menu-item" data-spy="#tickets" data-toggle="collapse" data-target="#navbar-collapse-down"&gt;Tickets&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#blog" class="menu-item" data-spy="#blog" data-toggle="collapse" data-target="#navbar-collapse-down"&gt;News&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact" data-spy="#contact" data-toggle="collapse" data-target="#navbar-collapse-down"&gt;Contact&lt;span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is all menu related js that came with the theme:</p>
  
  <pre><code>var lastId,
          topMenuHeight,
          topMenu = $('#nav'), 
          menuItems = topMenu.find('a'),
          menuItemsTop = topMenu.find('&gt; li &gt; a'),
          scrollItems = menuItemsTop.map(function(){
              var item = $($(this).data('spy'));
              if (item.length) { return item; }
          });
  
      if ($('body').hasClass('leftnav')){ 
          topMenuHeight = 0;
      } else {
          topMenuHeight = 50;
      }
  
      menuItems.not('.external-link').on('click touchend',function(e) {
          e.preventDefault();
          var target = $(this).attr('href');      
  
          if (!$(this).parent().parent().hasClass('dropdown-menu')){
              $(this).parent().siblings().removeClass('active');
          }
  
          $(this).data('clicked', true);
  
          // If the url item is defined, this for dropdowns   
          if ( typeof ( $(target).offset() ) !== 'undefined'){
              $('html,body').stop().animate({ 
                  scrollTop: $(target).offset().top - topMenuHeight
              }, '1000' ,'easeOutExpo');
          }
      });
  
       // Drop down navigation    
       $('.dropdown-menu li a').click(function(){
              var j = $(this).parent().index();
  
              var subnavigation = $(this).closest('ul').data('subnav');
  
              $('#'+ subnavigation + ' li').removeClass('active');
              $('#'+ subnavigation + ' li').each(function(i){
                  if ( j  ===  i){
                      $(this).addClass('active');
                  }
              })
  
              var target =  $('#'+ subnavigation + ' li').closest('.parent');
  
              $('html,body').stop().animate({
                  scrollTop: target.offset().top - topMenuHeight
              }, '1000' ,'easeOutExpo');
          })
  
      // Scroll on click links
      $('.link-more[href*=#]').click(function(e){
              e.preventDefault();
  
              var target = $(this.hash);
  
              $('html,body').stop().animate({
                  scrollTop: target.offset().top - topMenuHeight
              }, '1000' ,'easeOutExpo');
          })
  
      // Scroll to the section clicked on navigation
      $(window).scroll(function(){    
          var fromTop =  $(this).scrollTop() + topMenuHeight;     
          var cur = scrollItems.map(function(){
              if($(this).offset().top &lt; fromTop + 1)
                  return this;
          });
  
         cur = cur[cur.length-1];
  
         var id = cur &amp;&amp; cur.length ? cur[0].id : '';
  
        if (lastId !== id) {
             lastId = id;
  
             menuItemsTop
               .parent().removeClass('active')
               .end().filter("[data-spy=#"+id+"]").parent().addClass("active");     
         }
      })
  
  
      $('.navbar-toggle').on('click', function(e){
          $('.nav').toggle();
      });
  </code></pre>
  
  <p>I also copied the last couple of lines from the js and changed it to be triggered from .menu-item like this:</p>
  
  <pre><code>$('.menu-item').on('click', function(e){
          $('.nav').toggle();
      });
  </code></pre>
  
  <p>If anyone would be so kind as to help me out I would be very grateful.
  Cheers</p>