Bootstrap 3 Template
This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.
by 1eddy87
HTML
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="navmenu offcanvas navmenu-default navmenu-fixed-left">
<ul class="nav navmenu-nav"> <a class="navmenu-brand" href="#">Project name</a>
<li><a href="../navmenu/">Slide in</a>
</li>
<li class="active"><a href="./">Push</a>
</li>
<li><a href="../navmenu-reveal/">Reveal</a>
</li>
<li><a href="../navbar-offcanvas/">Off canvas navbar</a>
</li>
</ul>
<ul class="nav navmenu-nav">
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">dd <b class="caret"></b></a>
<ul class="dropdown-menu navmenu-nav">
<li><a href="#">Action</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a>
</li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="canvas">
<div class="container">
<div class="page-header">
<ul class="list-inline">
<li>
<a...
CSS
html, body {
height: 100%;
}
.navbar-toggle {
/* float: left; */
float: right;
margin-left: 15px;
}
@media (min-width: 0) {
.navbar-toggle {
display: block;
/* force showing the toggle */
}
}
@media (min-width: 992px) {
body {
padding: 0;
}
.navbar {
/* right: auto; */
left: auto;
background: none;
border: none;
}
}
.canvas {
position: relative;
left: 0;
top: 0;
height: 100%;
padding: 0px 0px 0px;
background: #FFF none repeat scroll 0% 0%;
z-index: 2;
}
.page-header {
margin: 10px 0px 20px;
}
.navmenu {
z-index: 1;
}
.test {
position: relative;
top: 25px;
left: 0;
}
i {
cursor: pointer;
}
JavaScript
console.log('works');