title: How to display sidebar collapse content without overflow: visible?
body: <p>I'm using fixed left <code>.navbar</code> and want to show <code>.collapse</code> content when my <code>.navbar</code> toggled (stacked to left). I managed to do this, but when I want to scroll the <code>.navbar</code> while the .navbar is stacked to do this I have to set <code>.navbar</code> to <code>overflow: auto</code>. But when the <code>.navbar</code> is <code>.toggled</code>, if the overflow not set <code>visible</code> the menu <code>.collapse</code> not visible too. How can I make the <code>.navbar</code> scrollable and show the <code>.collapse</code> content together?</p>
  <p><strong>Here is the picture for better understanding:</strong>
  <a href="https://i.stack.imgur.com/tptPt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tptPt.png" alt="enter image description here" /></a></p>
  <p><strong>CSS</strong></p>
  <pre><code>.navbar {
      background-color: #152e4d;
      border-color: #12263f;
      position: fixed;
      overflow: auto;
      padding: 16px;
      min-height: 100vh;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1030
  }
  
  .navbar.toggled {
      width: 6.5rem !important;
      padding: 0 !important;
  }
  
  .navbar.toggled .nav-item .collapse {
      background-color: #152e4d;
      border-radius: 5px;
      border: 1px solid #102137;
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      max-height: 22rem;
      overflow-y: auto;
      position: absolute;
      left: calc(6.5rem + 1.5rem / 2);
      z-index: 1;
      top: 2px;    
  }
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;nav id=&quot;mainNav&quot; class=&quot;navbar navbar-expand-md navbar-dark nav-left&quot;&gt;
  
      &lt;button class=&quot;navbar-toggler collapsed&quot; type=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; data-bs-target=&quot;#navbarsExampleDefault&quot; aria-controls=&quot;navbarsExampleDefault&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
          &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;&quot;&gt;
          &lt;i class=&quot;bi bi-currency-bitcoin&quot;&gt;&lt;/i&gt;
          &lt;span&gt;Brand&lt;/span&gt;
      &lt;/a&gt;
  
      &lt;div class=&quot;navbar-collapse collapse&quot; id=&quot;navbarsExampleDefault&quot; style=&quot;&quot;&gt;
          &lt;ul class=&quot;navbar-nav&quot;&gt;
              &lt;li class=&quot;nav-item&quot;&gt;
                  &lt;a class=&quot;nav-link active&quot; href=&quot;&quot;&gt;
                      &lt;i class=&quot;bi bi-graph-up&quot;&gt;&lt;/i&gt;
                      &lt;span&gt;Dashboard&lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#collapse1&quot; role=&quot;button&quot; data-bs-toggle=&quot;collapse&quot; aria-expanded=&quot;true&quot; aria-controls=&quot;collapse1&quot;&gt;
                      &lt;i class=&quot;bi bi-box-seam&quot;&gt;&lt;/i&gt;
                      &lt;span&gt;Packages&lt;/span&gt;
                  &lt;/a&gt;
                  &lt;div id=&quot;collapse1&quot; class=&quot;collapse show&quot; aria-labelledby=&quot;headingTwo&quot; data-bs-parent=&quot;#navbarsExampleDefault&quot;&gt;
                      &lt;a class=&quot;dropdown-item&quot;&gt;Action&lt;/a&gt;
                      &lt;a class=&quot;dropdown-item&quot;&gt;Another action&lt;/a&gt;
                      &lt;a class=&quot;dropdown-item&quot;&gt;Something else here&lt;/a&gt;                    
                  &lt;/div&gt;
              &lt;/li&gt;           
          &lt;/ul&gt;
          
      &lt;/div&gt;
      &lt;div class=&quot;text-center d-none d-md-inline&quot;&gt;
          &lt;button class=&quot;rounded-circle border-0&quot; id=&quot;mininavToggle&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>