So far I have a responsive side bar and top bar.
My problem is I want to make my side bar 100% height but still responsive. The reason I want it to be a 100% so the background colour runs down the screen. This is how it looks currently http://prntscr.com/gtyxt0
This is how it looks when it the browser width is shortened: http://prntscr.com/gtyxxp When clicking the icon, the side bar expands which is exactly what I want.
When I set the position of the side bar to fixed so I can set the height 100% I lose all responsiveness.
What is the best way to go about this?
Here is my HTML/CSS
HTML
<div class="navbar navbar-fixed-top navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand title" href="#">DSUM</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{username}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Sign Out</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
<div class="container-fluid page-header">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="sidebar-nav">
<ul class="nav">
<li class="sidebar-item-group">Menu</li>
<li><a routerLink="/dashboard"><i class="fa fa-home" aria-hidden="true"></i> Dashboard</a></li>
<li class="nav-divider"></li>
<li class="sidebar-item-group">Quick Links</li>
<li><a routerLink="/usersearch"><i class="fa fa-search" aria-hidden="true"></i> User Search</a></li>
<li><a href="#"><i class="fa fa-user-plus" aria-hidden="true"></i> Create Disc Account</a></li>
<li><a href="#"><i class="fa fa-address-card-o" aria-hidden="true"></i> Create Disc Role</a></li>
</ul>
</div>
<!--/.well -->
</div>
<!--/span-->
<div class="col-xs-12 col-sm-9">
<br>
<div class="jumbotron">
<a class="visible-xs" data-toggle="offcanvas"><i class="fa fa-lg fa-reorder"></i></a>
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row">
</div>
<!--/row-->
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!--/.container-->
CSS
body {
padding-top: 50px;
}
footer {
padding-left: 15px;
padding-right: 15px;
}
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
background: #ecf0f1;
}
.row-offcanvas-left .sidebar-offcanvas {
left: -40%;
}
.row-offcanvas-left.active {
left: 40%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 40%;
margin-left: 12px;
}
}
#sidebar {
padding: 15px;
margin-top: 10px;
background-color: #2F363E;
}
.title {
background-color: #1F70A8;
text-align: left;
font-family: 'Lato', sans-serif;
font-size: 24px;
font-weight: bold;
color: #e1ffff;
width: 185px;
}
.sidebar-item-group {
color: #637083;
font-family: 'Lato', sans-serif;
font-weight: bold
}