title: bootstrap collapsible navbar starts open
body: <p>I am working on a website with bootstrap, this is the code relative to the navbar</p>
  
  <pre><code>&lt;nav id="navi" role="navigation" class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" class="navbar-toggle"&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 href="#" class="navbar-brand"&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="bs-example-navbar-collapse-1" class="collapse-navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#" class="active"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Promotion&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>it look very well both on desktop and on mobile, but the problem is that on mobile, the #bs-example-navbar-collapse-1 element starts open!! so that means that basically I need to press the three lines button 2 times to close it (first click basically re-opens the collapsible)</p>
  
  <p>Anyone had the same issue? Thanks in advance.</p>