title: twitter bootstrap responsive menu randomly does not collapse after menu selection
body: <p>I am using Twitter Bootstrap responsive for a mobile app built using Brightcove App Cloud. When the menu collapses on narrow devices it will eventually fail to collapse after a menu selection.  The content below the menu will change, but the menu does not collapse.  I have tried to isolate it to one HTML page, or menu item position, but can't see a pattern.</p>
  
  <p>Here is the pertinent code from my files (which are basically the same for six pages, outside of some specific CSS):</p>
  
  <pre><code>  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" /&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
      &lt;meta name="bc-manifest" content="manifest.json" /&gt;
      &lt;title&gt;Zencoder&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://files.brightcove.com/proxima-nova/font-faces.css"&gt;
      &lt;link href="stylesheets/brightcove-app-cloud-1.12.min.css" rel="stylesheet"/&gt;
      &lt;link href="stylesheets/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="stylesheets/bootstrap-responsive.css" rel="stylesheet"&gt;
      &lt;link href="stylesheets/allPagesStyles.css" rel="stylesheet"&gt;
      &lt;link href="stylesheets/zencoder.css" rel="stylesheet"&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
  &lt;section id="pageone" class="page"&gt;
    &lt;header class="header"&gt;
      &lt;div class="navbar navbar-fixed-top"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&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;/a&gt;
            &lt;div class="nav-collapse"&gt;
              &lt;ul class="nav maintop app-navigation"&gt;
                &lt;li id="mainNavTargetS"&gt;&lt;a class="ss-nav"&gt;System Status&lt;/a&gt;&lt;/li&gt;
                &lt;li id="mainNavTargetBC"&gt;&lt;a class="bc-nav"&gt;Brightcove&lt;/a&gt;&lt;/li&gt;
                &lt;li id="mainNavTargetVC"&gt;&lt;a class="vc-nav"&gt;Video Cloud&lt;/a&gt;&lt;/li&gt;
                &lt;li id="mainNavTargetAC"&gt;&lt;a class="ac-nav"&gt;App Cloud&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active" id="mainNavTargetZC"&gt;&lt;a class="zc-nav"&gt;Zencoder&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
          &lt;/div&gt;&lt;!-- /.container --&gt;
        &lt;/div&gt;&lt;!-- /.navbar-inner --&gt;
      &lt;/div&gt;&lt;!-- /.navbar --&gt;
    &lt;/header&gt;
  </code></pre>
  
  <p>Thanks for helping out with this (at least to me) perplexing problem.</p>
  
  <p>-Matt</p>