title: How to create another bootstrap collapse navbar button?
body: <p>I am trying to create a fixed navbar top similar to Udemy using bootstrap 3. This contains a left aligned collapsible drop down. But copying <code>navbar-header</code> twice didn't work.  CSS is not my strong point. Any direction is appreciated.</p>
  <p><img src="https://i.stack.imgur.com/MV6ij.png" alt="enter image description here" /></p>
  <p>Collapsed one on left and one on the right.</p>
  <p><img src="https://i.stack.imgur.com/cTYyk.png" alt="enter image description here" /></p>
  <h1>Update</h1>
  <p>This is what I have so far. I would like the button group items to adopt the default behaviour of bootstrap (with icon-bar) on the left most corner of navbar when resized for smaller displays.</p>
  <pre><code>&lt;nav class=&quot;navbar navbar-default navbar-fixed-top&quot; role=&quot;navigation&quot;&gt;
    &lt;header class=&quot;container&quot;&gt;
      &lt;div class=&quot;navbar-header&quot;&gt;
        &lt;button type=&quot;button&quot; class=&quot;navbar-toggle&quot; data-toggle=&quot;collapse&quot; data-target=&quot;.navbar-collapse&quot;&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Toggle navigation&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&quot;icon-bar&quot;&gt;&lt;/span&gt;
        &lt;/button&gt;          
      &lt;/div&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot;&gt;
        &lt;ul class=&quot;nav navbar-nav navbar-right&quot;&gt;
          &lt;li class=&quot;dropdown&quot;&gt;
            &lt;div class=&quot;btn-group header-dropdown nav navbar-nav&quot;&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Select City&lt;/button&gt;
              &lt;button type=&quot;button&quot; class=&quot;btn btn-success dropdown-toggle&quot; data-toggle=&quot;dropdown&quot;&gt;
                &lt;span class=&quot;caret&quot;&gt;&lt;/span&gt;
                &lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
              &lt;/button&gt;
              &lt;ul class=&quot;dropdown-menu&quot; role=&quot;menu&quot;&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Chennai&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Bangalore&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Mumbai&lt;/a&gt;&lt;/li&gt;
                &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Others&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Item 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/nav&gt;    
  </code></pre>