Bootstrap navbar with off canvas menu - html

Question

On my dashboard example I have the bootstrap navbar menu on top of the column_left menu as shown in code preview below
Update: This link has now be updated with new code from my Answer!
Code Preview Click Here
What I am trying to be able to do is have the navbar so its on the edge of the column left side bar and and open and close correct width also.
Currently the menu opens and closes under neath the navbar.
Question: How can I make my navbar so it on the edge of the sidebar
rather than on top and open and close with same width. I have tried to
put the navbar in side the content div but no luck.
HTML
<div id="column-left">
<ul id="menu">
<li>
<i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span>
</li>
<li>
<i class="fa fa-bar-chart"></i> <span>Single Link</span>
</li>
<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>
<li>Link 1</li>
<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li>Sub Menu Link 1a</li>
<li>Sub Menu Link 1b</li>
</ul>
</li>
<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li>Sub Menu Link 2a</li>
<li>Sub Menu Link 2b</li>
<li>Sub Menu Link 2c</li>
</ul>
</li>
</ul>
</li><!-- System -->
</ul>
</div>
<div id="content">
<div class="main">
<div class="container-fluid">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top navbar-shadow">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
Project name
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</nav>
</div>
</div>
</div>
CSS
#import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
/* Global */
body {
/*height: 100%;*/
margin: 0;
/*min-height: 100% !important;*/
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
padding-top: 70px;
width: 100%;
background-color: #eee;
}
a,
a:hover,
a:focus {
cursor: pointer;
text-decoration: none;
}
tr:hover a.dashboard-user:after {
font-family: FontAwesome;
content: "\f044";
font-size: 14px;
}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
display: inline;
}
/* Layout */
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
#content {
padding-bottom: 40px;
transition: all 0.3s;
}
/* Column Left */
#column-left {
width: 50px;
min-height: 100%;
background-color: #242424;
top: 0px;
position: fixed;
padding-top: 70px;
z-index: 10;
transition: all 0.3s;
}
#column-left:hover{
width: 250px;
}
#column-left + #content {
margin-left: 50px;
}
#column-left + #content + #footer {
margin-left: 50px;
}
#media (max-width: 767px) {
#column-left {
overflow: hidden;
display: none;
}
#column-left + #content {
margin-left: 0;
}
#column-left + #content + #footer {
margin-left: 0;
}
}
/* Column Left Active */
#column-left.active {
width: 235px;
display: block;
}
#media (min-width: 768px) {
#column-left.active {
overflow: auto;
}
#column-left.active + #content {
margin-left: 235px;
}
#column-left.active + #content + #footer {
margin-left: 235px;
}
}
#media (max-width: 767px) {
#column-left.active + #content {
position: relative;
left: 235px;
}
#column-left.active + #content + #footer {
position: relative;
left: 235px;
}
}
#column-left.active {
width: 235px;
}
#column-left.active #menu li i {
font-size: 14px;
}
#column-left.active #menu > li > a > span {
display: inline;
}
#column-left.active #menu > li > ul {
position: relative;
left: auto;
top: auto;
width: auto;
visibility: visible;
}
/* Top Navbar */
.menu {
background: #eeeeee none repeat scroll 0 0;
}
.navbar {
background-color: #fff !important;
border: 0 none;
border-radius: 0;
color: #666;
margin-bottom: 0;
}
.navbar.navbar-shadow {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}
#button-menu {
display: inline-block;
cursor: pointer;
color: #6D6D6D;
}
#media (max-width: 640px) {
.navbar-brand {
font-size: 14px;
padding: 15px 7px;
}
}
.profile {
display: none;
}
#column-left.active .profile {
display: block;
padding-left: 15px;
border-bottom: 1px solid #2d2d2d;
padding-bottom: 25px;
}
.profile .media-left img {
border: 2px solid #888;
border-radius: 50%;
max-width: 40px;
}
/* Sidebar Menu */
#menu,
#menu ul,
#menu li {
padding: 0;
margin: 0;
min-height: 100%;
list-style: none;
}
#menu {
margin-bottom: 25px;
}
#menu > li {
position: relative;
}
#menu li a {
text-decoration: none;
display: block;
padding: 10px;
cursor: pointer;
color: #aaaaaa;
border-bottom: 1px solid #2d2d2d;
}
#menu li a i {
color: rgba(170, 170, 170, 0.7);
font-size: 16px;
}
#menu > li > a {
color: #aaaaaa;
font-size: 14px;
padding-left: 13px;
}
#menu > li > a:hover {
background-color: #444444;
}
#menu > li > a > span {
display: none;
margin-left: 8px;
}
#menu li li a {
border-bottom: none !important;
}
#menu li li a:hover {
color: #aaaaaa;
background-color: #1e1e1e;
}
/*
#menu li li a:before {
content: "\f101";
font-size: 14px;
font-family: FontAwesome;
margin-left: 10px;
margin-right: 10px;
transition: margin ease 0.5s;
}
*/
#menu li li a:hover:before {
margin-right: 20px;
}
#menu > li.active > a {
color: #aaaaaa;
background: #242424;
}
#menu li.active li a {
color: #aaaaaa;
}
#menu li li.active > a:last-child {
color: #aaaaaa;
}
#menu li li.active a:last-child:before {
margin-left: 20px;
margin-right: 10px;
}
#menu > li > ul {
position: absolute;
left: 50px;
top: 0px;
width: 210px;
background-color: #313131;
visibility: hidden;
}
#menu li ul {
overflow: hidden;
}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul a {
padding-left: 20px;
}
#menu li li ul a {
padding-left: 40px;
}
#menu li li li ul a {
padding-left: 60px;
}
#menu li li li li ul a {
padding-left: 60px;
}
#menu li li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul li a.parent:after, #column-left.active #menu > li ul li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li ul li.open > a.parent:after, #column-left.active #menu > li ul li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}

Answer 1

Problem solved.
Updated codepen preview
Click Here For Preview
The issue was have the navbar fixed so was on top all the time.
I have removed navbar-fixed-topand removed the padding-top 70px from body {}
Image
CSS
#import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
width: 100%;
background-color: #eee;
}
a,
a:hover,
a:focus {
cursor: pointer;
text-decoration: none;
}
tr:hover a.dashboard-user:after {
font-family: FontAwesome;
content: "\f044";
font-size: 14px;
}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
display: inline;
}
/* Layout */
.container-fluid {
padding-left: 20px;
padding-right: 20px;
}
#content {
padding-bottom: 40px;
transition: all 0.3s;
}
/* Column Left */
#column-left {
width: 50px;
min-height: 100%;
background-color: #242424;
top: 0px;
position: fixed;
padding-top: 70px;
z-index: 10;
transition: all 0.3s;
}
#column-left:hover{
width: 250px;
}
#column-left + #content {
margin-left: 50px;
}
#column-left + #content + #footer {
margin-left: 50px;
}
#media (max-width: 767px) {
#column-left {
overflow: hidden;
display: none;
}
#column-left + #content {
margin-left: 0;
}
#column-left + #content + #footer {
margin-left: 0;
}
}
/* Column Left Active */
#column-left.active {
width: 235px;
display: block;
}
#media (min-width: 768px) {
#column-left.active {
overflow: auto;
}
#column-left.active + #content {
margin-left: 235px;
}
#column-left.active + #content + #footer {
margin-left: 235px;
}
}
#media (max-width: 767px) {
#column-left.active + #content {
position: relative;
left: 235px;
}
#column-left.active + #content + #footer {
position: relative;
left: 235px;
}
}
#column-left.active {
width: 235px;
}
#column-left.active #menu li i {
font-size: 14px;
}
#column-left.active #menu > li > a > span {
display: inline;
}
#column-left.active #menu > li > ul {
position: relative;
left: auto;
top: auto;
width: auto;
visibility: visible;
}
/* Top Navbar */
.menu {
background: #eeeeee none repeat scroll 0 0;
}
.navbar {
background-color: #fff !important;
border: 0 none;
border-radius: 0;
color: #666;
margin-bottom: 0;
}
.navbar.navbar-shadow {
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08), 0 2px 0 0 rgba(0, 0, 0, 0.02);
}
#button-menu {
display: inline-block;
cursor: pointer;
color: #6D6D6D;
}
#media (max-width: 640px) {
.navbar-brand {
font-size: 14px;
padding: 15px 7px;
}
}
.profile {
display: none;
}
#column-left.active .profile {
display: block;
padding-left: 15px;
border-bottom: 1px solid #2d2d2d;
padding-bottom: 25px;
}
.profile .media-left img {
border: 2px solid #888;
border-radius: 50%;
max-width: 40px;
}
/* Sidebar Menu */
#menu,
#menu ul,
#menu li {
padding: 0;
margin: 0;
min-height: 100%;
list-style: none;
}
#menu {
margin-bottom: 25px;
}
#menu > li {
position: relative;
}
#menu li a {
text-decoration: none;
display: block;
padding: 10px;
cursor: pointer;
color: #aaaaaa;
border-bottom: 1px solid #2d2d2d;
}
#menu li a i {
color: rgba(170, 170, 170, 0.7);
font-size: 16px;
}
#menu > li > a {
color: #aaaaaa;
font-size: 14px;
padding-left: 13px;
}
#menu > li > a:hover {
background-color: #444444;
}
#menu > li > a > span {
display: none;
margin-left: 8px;
}
#menu li li a {
border-bottom: none !important;
}
#menu li li a:hover {
color: #aaaaaa;
background-color: #1e1e1e;
}
/*
#menu li li a:before {
content: "\f101";
font-size: 14px;
font-family: FontAwesome;
margin-left: 10px;
margin-right: 10px;
transition: margin ease 0.5s;
}
*/
#menu li li a:hover:before {
margin-right: 20px;
}
#menu > li.active > a {
color: #aaaaaa;
background: #242424;
}
#menu li.active li a {
color: #aaaaaa;
}
#menu li li.active > a:last-child {
color: #aaaaaa;
}
#menu li li.active a:last-child:before {
margin-left: 20px;
margin-right: 10px;
}
#menu > li > ul {
position: absolute;
left: 50px;
top: 0px;
width: 210px;
background-color: #313131;
visibility: hidden;
}
#menu li ul {
overflow: hidden;
}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul a {
padding-left: 20px;
}
#menu li li ul a {
padding-left: 40px;
}
#menu li li li ul a {
padding-left: 60px;
}
#menu li li li li ul a {
padding-left: 60px;
}
#menu li li li a.parent:after, #column-left.active #menu > li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
#menu li ul li a.parent:after, #column-left.active #menu > li ul li a.parent:after {
font-family: FontAwesome;
content: "\f105";
float: right;
margin-right: 8px;
}
#menu li ul li.open > a.parent:after, #column-left.active #menu > li ul li.open > a.parent:after {
font-family: FontAwesome;
content: "\f107";
float: right;
margin-right: 8px;
}
HTML
<div id="column-left">
<ul id="menu">
<li>
<i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span>
</li>
<li>
<i class="fa fa-bar-chart"></i> <span>Single Link</span>
</li>
<li>
<a class="parent"><i class="fa fa-cog fa-fw"></i> <span>Multilevel Menu</span></a>
<ul>
<li>Link 1</li>
<li><a class="parent">Sub Multilevel Menu 1</a>
<ul>
<li>Sub Menu Link 1a</li>
<li>Sub Menu Link 1b</li>
</ul>
</li>
<li><a class="parent">Sub Multilevel Menu 2</a>
<ul>
<li>Sub Menu Link 2a</li>
<li>Sub Menu Link 2b</li>
<li>Sub Menu Link 2c</li>
</ul>
</li>
</ul>
</li><!-- System -->
</ul>
</div>
<div id="content">
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-shadow">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a type="button" id="button-menu" class="navbar-brand"><i class="fa fa-indent fa-lg"></i></a>
Project name
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider" role="separator"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container-fluid">
</div>
</div>
</div>