title: navbar-fixed-top inside parent div with full width
body: <p>I have a webpage which has a <code>sidebar-nav</code> along the left and a <code>navbar-fixed-top</code> along the top. The sidebar is collapsible by clicking a button which is on the top navbar. The top nav bar starts where the sidebar ends.</p>
  
  <p>That part all works correctly. What is not working is that I can't get the top navbar to take up the full width available to it (excluding the sidebar). In other words when the sidebar is expanded, the top navbar needs to take up all of the remaining width. When the side bar is collapsed, it needs to take up the whole width. This is what I have:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;div id="sidebar-wrapper"&gt;
      &lt;ul class="sidebar-nav"&gt;
          &lt;!--side bar menu items here--&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="navbar-fixed-top" style="position:relative;"&gt;
      &lt;div class="navbar" style="position:fixed;"&gt;
          &lt;!--top navbar items here--&gt;
          &lt;!--button to collapse/hide sidebar also here--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container-fluid" id="page-content-wrapper"&gt;
      &lt;div class="col-lg-12"&gt;
        &lt;!--general page content here--&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried adding <code>width:80%</code> to the navbar which works correctly when the sidebar is expanded, but then when you collapse the side bar it still only takes up 80% of the full width. It should expand to 100% when that happens.</p>