Add sidebar links to Bootstrap "hamburger" menu
<p>I have a page made in Bootstrap that has both a top navbar and a sidebar. Currently, when you resize the page down to a smaller size (or view it on mobile/tablet), the sidebar disappears and the top bar's links go into the "hamburger" menu (the dropdown that is only shown at smaller screen sizes). I would like the sidebar's links to be added to the hamburger menu as well, but not to be displayed on the top bar when the screen is large. </p>

<p>Currently here is what I have for the top bar:</p>

<pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
(some other stuff)
    &lt;div id="navbar" class="navbar-collapse collapse"&gt;
      &lt;ul class="nav navbar-nav navbar-right"&gt;
        &lt;li class="logout-link"&gt;&lt;a href="logout url"&gt;Logout&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>and here is what I have for the side bar (located within a 'row' div):</p>

<pre><code>    &lt;div class="col-sm-2 col-md-2 sidebar"&gt;
      &lt;ul class="nav nav-sidebar"&gt;
        &lt;li&gt;&lt;a href="fizz"&gt;Fizz&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="buzz"&gt;Buzz&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="blah"&gt;Blah&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
</code></pre>

<p>When you resize the page down, the dropdown menu that appears in the top right looks like this:</p>

<pre><code>logout
</code></pre>

<p>And I would like it to look like this:</p>

<pre><code>Fizz
Buzz
Blah
======
logout
</code></pre>

<p>...without adding "Fizz Buzz Blah" to the top bar of the full-sized screen. How can I do this? I tried adding the "dropdown" and "nav-navbar" classes to the sidebar column but it didn't work.</p>