title: Create a responsive navbar sidebar "drawer" in Bootstrap?
body: <p>Trying to achieve something like this : <a href="https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html" rel="noreferrer">https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/index.html</a></p>
  
  <p>I've seen some examples online using other versions of bootstrap, but they all change the css too much, which makes it harder to learn bootstrap.</p>
  
  <p>I was wondering if in Bootstrap 4 this can be done using tools like collapse, stacked pills, flexbox?</p>
  
  <p>This is what I could achieve : <a href="https://jsfiddle.net/kL9u6esw/20/" rel="noreferrer">https://jsfiddle.net/kL9u6esw/20/</a></p>
  
  <p>What is missing from my Jsfiddle :</p>
  
  <ol>
  <li>Not correctly responsive</li>
  <li>The navbar isn't scrolling properly with the sticky class</li>
  <li>The menu button isn't sticky even though I set the class.</li>
  <li>A background dimmer, although not necessary for the answer, would be great</li>
  </ol>
  
  <p>In my example I couldn't figure out how to insert a navbar, not sure if its necessary for it to be properly responsive.</p>
  
  <p>Also not sure if having it as a columns is the correct way to do it, shouldn't it be off-canvas?</p>
  
  <p>Html code :</p>
  
  <pre><code>&lt;div class="container-fluid h-100"&gt;
    &lt;div class="row h-100"&gt;
      &lt;div class="col-5 col-md-3 collapse m-0 p-0 h-100 bg-dark" id="collapseExample"&gt;
        &lt;ul class="nav flex-column navbar-dark sticky-top"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link active" href="#"&gt;Active&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="#"&gt;Link&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="col"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-12"&gt;
            &lt;button class="btn sticky-top" data-toggle="collapse" href="#collapseExample" role="button"&gt;
              Menu
            &lt;/button&gt;   
          &lt;/div&gt;
          &lt;div class="col-12"&gt;
            Lorem...
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>