title: How to prevent a blank space when scrolling with a sidebar?
body: <p>I'm currently building a sidebar using bootstrap.
  I have the bar built, however when I scroll down the page, a blank space appears between the sidebar and the navbar. Is there anyway that I can make the navbar stay stationary, or fill in the blank space when the page is scrolled down? I have included screenshots and code. <a href="https://i.stack.imgur.com/4lEPv.png" rel="nofollow noreferrer">Normal, before scrolling</a></p>
  
  <p><a href="https://i.stack.imgur.com/WITFy.png" rel="nofollow noreferrer">After Scrolling</a></p>
  
  <p>Code listed below:</p>
  
  <pre><code>&lt;nav class = "navbar navbar-inverse"&gt;
      &lt;div class = "container-fluid"&gt;
          &lt;div class = "navbar-header"&gt;
              &lt;button type = "button" class="navbar-toggle" data-
  toggle="collapse" data-target="#myNavbar"&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;a class = "navbar-brand" href="Home.html"&gt;Stephens Catering&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class = "collapse navbar-collapse" id="myNavbar"&gt;
              &lt;ul class = "nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="Home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="AboutUs.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="dropdown"&gt;
      &lt;a class = "dropdown-toggle" data-toggle="dropdown" 
      href="OurProducts.html"&gt;Our Products
                      &lt;span class = "caret"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;ul class = "dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="Cookers.html"&gt;Cookers&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Fridges.html"&gt;Fridges&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Misc.html"&gt;Misc&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="ContactUs.html"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;ul class = "nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;
  &lt;/span&gt; Sign Up&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-in"&gt;
  &lt;/span&gt; Login&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;!--The sidebar for the products pages --&gt;
  &lt;div id = "wrapper"&gt;
      &lt;!-- Sidebar --&gt;
      &lt;div id = "sidebar-wrapper"&gt;
          &lt;ul class="sidebar-nav"&gt;
              &lt;li class = "sidebar-brand"&gt;
                  &lt;a href="#"&gt;Categories&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="Cookers.html"&gt;Cookers&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="Fridges.html"&gt;Fridges&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="Misc.html"&gt;Misc&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!-- Sidebar Wrapper --&gt;
  
  &lt;!-- Page Content --&gt;
  &lt;!-- Button to toggle sidebar menu --&gt;
  &lt;div id="page-content-wrapper"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class = "row"&gt;
              &lt;div class = "col-lg-12"&gt;
                  &lt;a href="#menu-toggle" class="btn btn-default" id="menu-toggle"&gt;Toggle Menu&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The stylesheet:</p>
  
  <pre><code>body {
  overflow-x: hidden;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>/* Toggle Styles */
  
  #wrapper {
  padding-left: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition:all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s;
  }
  
  #wrapper.toggled {
  padding-left:250px;
  }
  
  #sidebar-wrapper {
  z-index: 1000;
  position:fixed;
  left:250px;
  width:0;
  height:100%;
  margin-left: -250px;
  overflow-y: auto;
  background: #000;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
  
  #wrapper.toggled #sidebar-wrapper {
  width:250px;
  }
  
  #page-content-wrapper {
  width:100%;
  position:absolute;
  padding:15px;
  }
  
  #wrapper.toggled #page-content-wrapper {
  position:absolute;
  margin-right: -250px;
  }
  
  /* Sidebar Styles */
  
  .sidebar-nav {
  position:absolute;
  top:0;
  width:250%;
  margin:0;
  padding:0;
  list-style: none;
  }
  
  .sidebar-nav li {
  text-indent:20px;
  line-height: 40px
  }
  
  .sidebar-nav li a {
  display: block;
  text-decoration: none;
  color:#999999;
  }
  
  .sidebar-nav li a:hover {
  text-decoration: none;
  color:#fff;
  background:rgba(255,255,255,0.2);
  }
  
  .sidebar-nav li a:active,
  .sidebar-nav li focus {
  text-decoration: none;
  }
  
  .sidebar-nav &gt; .sidebar-brand {
  height:65px;
  font-size:18px;
  line-height: 60px;
  }
  
  .sidebar-nav &gt; .sidebar-brand a {
  color:#999999;
  }
  
  .sidebar-nav &gt; sidebar-brand a:hover{
  color:#fff;
  backround:none;
  }
  
  @media(min-width: 768px) {
  #wrapper {
      padding-left:0;
  }
  
  #wrapper.toggled {
      padding-left:250px;
  }
  
  #sidebar-wrapper {
      width:0;
  }
  
  #wrapper.toggled #sidebar-wrapper {
      width:250px;
  }
  
  #page-content-wrapper {
      padding:20px;
      position: relative;
  }
  
  #wrapper.toggled #page-content-wrapper {
      position: relative;
      margin-right:0;
   }
  }
  </code></pre>