title: Left sidebar with toggle in Bootstrap 3 not working
body: <p>I'm trying to adapt a Bootstrap template shown here <a href="https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle" rel="nofollow noreferrer">https://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle</a> so that it includes a top navbar and a footer.</p>
  
  <p>My application needs the left sidebar to be the full height of the page (minus the top navbar and footer) and for the content area to scroll.</p>
  
  <p>I've created a fiddle to show what I've got so far here: <a href="https://jsfiddle.net/y9khea25/1/" rel="nofollow noreferrer">https://jsfiddle.net/y9khea25/1/</a></p>
  
  <p>The problem I'm having is that the button to toggle the sidebar, <code>#menu-toggle</code>, goes to the left and outside the viewport when <code>main</code> has the <code>.active</code> class removed (i.e. when the left sidebar is "collapsed"). This means that the user can't re-open the sidebar.</p>
  
  <p>I have adapted the markup from what was in the original Bootsnip. Part of this means that what they had originally inside <code>.page-content-wrapper</code> is now inside <code>main</code> which then uses Bootstrap's <code>.col</code> classes. I don't know if this is causing a separate problem?</p>
  
  <pre><code>&lt;main class="active"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation"&gt;
  
                  &lt;a id="menu-toggle" href="#"&gt;&lt;span class="glyphicon glyphicon-align-justify"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
                  &lt;ul&gt;
                      &lt;li&gt;item 1&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;div class="content col-xs-12 col-sm-9 col-md-10"&gt;
              &lt;!-- page content --&gt;
              &lt;/div&gt;
      &lt;/div&gt;
  &lt;/main&gt;
  </code></pre>