<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<a href="#" class="btn" id="menu-toggle"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
<h1 class="text-center">Bootstrap Sidebar</h1>
<h2 class="small text-center">Second Header</h2>
<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium perferendis maiores velit ad id delectus nisi eligendi doloremque officia necessitatibus, repellendus alias omnis, natus nam voluptates dolor vel minus ab?</p>
</div>
</div>
</div>
</div>
</div>
</body>
/* Sidebar */
#sidebar-wrapper{
z-index:1;
position: absolute;
width:0;
height:100%;
overflow-y:hidden;
background: #5b4282;
opacity:0.9;
transition:all .5s;
display:flex;
align-items:center;
}
/* Main Content */
#page-content-wrapper{
width: 100%;
position: absolute;
padding:15px;
transition:all .5s;
}
#menu-toggle{
transition:all .3s;
font-size:2em;
}
/* Change the width of the sidebar to display it*/
#wrapper.menuDisplayed #sidebar-wrapper{
width:250px;
}
#wrapper.menuDisplayed #page-content-wrapper{
padding-left:250px;
}
/* Sidebar styling */
.sidebar-nav{
padding:0;
list-style:none;
transition:all .5s;
width:100%;
text-align:center;
}
.sidebar-nav li{
line-height:40px;
width:100%;
transition:all .3s;
padding:10px;
}
.sidebar-nav li a {
display:block;
text-decoration:none;
color:#ddd;
}
.sidebar-nav li:hover{
background:#846bab;
}
