How to prevent a blank space when scrolling with a sidebar? - html

Question

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. Normal, before scrolling
After Scrolling
Code listed below:
<nav class = "navbar navbar-inverse">
<div class = "container-fluid">
<div class = "navbar-header">
<button type = "button" class="navbar-toggle" data-
toggle="collapse" data-target="#myNavbar">
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
<span class= "icon-bar"></span>
</button>
<a class = "navbar-brand" href="Home.html">Stephens Catering</a>
</div>
<div class = "collapse navbar-collapse" id="myNavbar">
<ul class = "nav navbar-nav">
<li>Home</li>
<li>About Us</li>
<li class="dropdown">
<a class = "dropdown-toggle" data-toggle="dropdown"
href="OurProducts.html">Our Products
<span class = "caret"></span></a>
<ul class = "dropdown-menu">
<li>Cookers</li>
<li>Fridges</li>
<li>Misc</li>
</ul>
</li>
<li>Contact us</li>
</ul>
<ul class = "nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user">
</span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in">
</span> Login</a></li>
</ul>
</div>
</div>
</nav>
<!--The sidebar for the products pages -->
<div id = "wrapper">
<!-- Sidebar -->
<div id = "sidebar-wrapper">
<ul class="sidebar-nav">
<li class = "sidebar-brand">
Categories
</li>
<li>
Cookers
</li>
<li>
Fridges
</li>
<li>
Misc
</li>
</ul>
</div>
<!-- Sidebar Wrapper -->
<!-- Page Content -->
<!-- Button to toggle sidebar menu -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class = "row">
<div class = "col-lg-12">
Toggle Menu
</div>
</div>
</div>
</div>
The stylesheet:
body {
overflow-x: hidden;
}
/* 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 > .sidebar-brand {
height:65px;
font-size:18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color:#999999;
}
.sidebar-nav > 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;
}
}

Answer 1

I think your issue is using the position:fixed in the #sidebar-wrapper css class which causes it to stick to the positioned place on the screen without scroll affect. If you want it to stick right below the top navbar then change it to position:absolute and your problem will be hopefully resolved. And if you want it to stick to top and also keep the black background of the sidebar to follow through to the bottom then change #sidebar-wrapper position:relative.
The best way for you to understand this is to understand the effects of the values of the position property. Following is a link to the w3schools definition of position property and it's values with description.
https://www.w3schools.com/cssref/pr_class_position.asp
Hope this helps.

Answer 2

Try adding this to your actual sidebar-wrapper css rule:
.sidebar-wrapper{
top:0;
}