Bootstrap Side Navbar - html

Question

I want to make a site with the layout like: http://www.hellomichael.com/?section=about
I am unable to get the navbar to stay as 100% of the page and also unable to get the list items to not follow as I scroll (I could use position fixed, but I'd have to use a specific height).
HTML:
<div class="row">
<div class="col-sm-3">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Music</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-sm-9">
<h2 style="height: 2000px;">CONTENT GOES HERE</h2>
</div>
</div>
CSS:
#media (min-width: 768px) {
.sidebar-nav .navbar .navbar-collapse {
padding: 0;
max-height: none;
}
.sidebar-nav .navbar ul {
float: none;
}
.sidebar-nav .navbar ul:not {
display: block;
}
.sidebar-nav .navbar li {
float: none;
display: block;
}
.sidebar-nav .navbar li a {
padding-top: 12px;
padding-bottom: 12px;
}
.sidebar-nav {
max-width: 200px;
z-index: 10000;
}
.navbar {
border-radius: 0 !important;
}
.navbar-default {
margin: 0 !important;
height: 100vh;
/*min-height: 100%;*/
}
/* .sidebar-navbar-collapse {
position: fixed;
height: 100%;
top: 0;
left: 0;
}*/
}
any suggestions?

Answer 1

You aren't too far away.
You just need to make a few changes to your .sidebar-nav class.
.sidebar-nav {
width: 200px; /*Changed from max-width: 200px to better fit smaller menu items, but this is up to your preference*/
z-index: 10000;
position: fixed; /*Keeps the menu from scolling with the page*/
min-height: 100%; /*Makes it fit 100% of your pages content*/
}
JSFiddle Demo Here