title: Bootstrap navbar with collapsed menu icon - How to?
body: <p>On this bootstrap starter template:</p>
  
  <p><a href="https://i.stack.imgur.com/A9VDI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A9VDI.png" alt="enter image description here"></a></p>
  
  <p>when the browser gets narrow the navigation bar links/buttons collapse into one icon in top-right corner like this:</p>
  
  <p><a href="https://i.stack.imgur.com/gJx4x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gJx4x.png" alt="enter image description here"></a></p>
  
  <p>I would like to have this collapsed "icon" as default like on the picture above. So that the navbar links are available after the user clicks that top-right collapsed button.</p>
  
  <p>How to do that?</p>
  
  <p>This is the source code of the template:</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
  &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&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" href="#"&gt;Project name&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id="navbar" class="collapse navbar-collapse"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;div class="container"&gt;
  
    &lt;div class="starter-template"&gt;
      &lt;h1&gt;Bootstrap starter template&lt;/h1&gt;
      &lt;p class="lead"&gt;Use this document as a way to quickly start any new project.&lt;br&gt; All you get is this text and a mostly barebones HTML document.&lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>