title: how to avoid that the scroll bar on the right overlaps with the top navbar (bootstrap)?
body: <p>I have a website with a navbar fixed to the top and a navbar on the left. When there is need for scrolling on the website, the scrollbar on the right overlaps with the top navbar. I would like the navbar to start below the top navbar.
  I made a fiddle with an example of the problem</p>
  
  <p><a href="https://jsfiddle.net/jsmnsLm7/" rel="noreferrer">https://jsfiddle.net/jsmnsLm7/</a>
  (please make the window big, so that you can see all of the features of my navbar setup)</p>
  
  <p>Here is the code which I also have in the fiddle (but stackoverlow forces me to put code in here as well... I think its much easier in the fiddle)</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt; 
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="active"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class="container"&gt;
      &lt;div class="row row-offcanvas row-offcanvas-left"&gt;
          &lt;div class="col-sm-3 col-md-2 sidebar-offcanvas" id="sidebar" role="navigation" style="width: 180px; position: fixed;"&gt;
              &lt;br&gt;&lt;br&gt;&lt;br&gt;
              &lt;ul class="nav nav-sidebar"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;item0&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;item3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--/span--&gt;
          &lt;div class="col-sm-9 col-md-10 main" style="margin-left: 180px;"&gt;      
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I saw that some discussed this problem before on stackoverflow, and they suggested to add position: fixed to the css of the container. However, when I do that, the left navbar gets fixed to the very left of the page. I want the left navbar to be flexible and synchronous with the top navbar (as shown in the fiddle example)
  thanks for any help
  best
  carl</p>