I just want to make the navbar and sidebar fixed even the user scroll down the page. And also responsive. How can I do that without changing the design of the navbar and sidebar? Can somebody help me with my problem using bootstrap? Here's my fiddle https://jsfiddle.net/exyvat08/17/
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
Dashboard
User
Supplier
Purchase Order
Reports
</div>
Original Design
Change your CSS to look like this:
.navbar{
position: fixed;
left: 0px; /* the key here is to make left and right '0px' */
right: 0px;
background: linear-gradient(to top right,#0084ff,#0084ff);
}
.content-container{ /* change this to be the container of your content */
margin-top: 57px /* 57px is just the height of your navbar */
}
Fiddle: https://jsfiddle.net/exyvat08/17/
I have fixed the siderbar & Nav bar fixed using position fixed & width calc
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
if (e.target.innerText == "Show Menu") {
e.target.innerText = "Hide Menu";
} else {
e.target.innerText = "Show Menu";
}
});
body {
height: 100%;
overflow-x: hidden;
font-family: sans-serif;
}
#logo {
width: 160px;
height: 150px;
border-radius: 50%;
}
#page-content-wrapper {
margin-left: 241px;
width: calc(100% - 241px);
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
position:fixed;
z-index: 1;
height:100vh;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
.navbar {
background: linear-gradient(to top right, #0084ff, #0084ff);
position: fixed !important;
width: calc(100% - 241px);
top:0px;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<body>
<div class="d-flex" id="wrapper">
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="sidebar-heading"><img class="mx-auto d-block" src="../images/logo.jpg" id="logo"></div>
<div class="list-group list-group-flush">
<i class="fas fa-tachometer-alt"></i>Dashboard
User
Supplier
Purchase Order
Reports
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-success border-bottom">
<button class="btn btn-outline-light btn-sm" id="menu-toggle">Hide Menu</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link text-light" href=""><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-light"><i class="fas fa-building"></i> Contact</a>
</li>
<li class="nav-item dropdown">
<a class="btn nav-link dropdown-toggle text-light" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user"></i> John Doe
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">See Profile</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
<h1>
test
</h1>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Related
Try to add top navigation that has side navigation already. But how I put the top navigation to the main page seems wrong. How to make side nav and top nav be in the same position. The image I put below. Top nav at the above. and the side nav goes below the top nav. I want to make it looks parallel. How to do it in the correct way?
In this case, my topnav height is 60 px. Is there any better way than just add margin-top -60px to my sidebar?
TopNavigation.jsp
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;"
class="user-profile dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
<img
src="
<c:url value="/resources/images/user.png"/>
"><%=session.getAttribute("usrname")%>
<span class=" fa fa-angle-down"></span>
</a>
</ul>
</nav>
</div>
</div>
SideNavigation.jsp
<nav id="sidebar">
<div class="custom-menu">
<button type="button" id="sidebarCollapse" class="btn btn-primary">
<i class="fa fa-bars"></i> <span class="sr-only">Toggle Menu</span>
</button>
</div>
<div class="p-4">
<h1>
<img src=""/>">
</h1>
<ul class="list-unstyled components scrollBarNav mb-5">
<li class="active"><a href="#"><span class="fa fa-camera "></span>
</a>
</li>
<li><span class="fa fa-code-fork"></span>
</li>
<li><a href="#"><span class=""><i class="fa fa-user-plus" aria-hidden="true"></i></span>
</a>
</li>
</ul>
<div class="footer">
<span class="fa fa-sign-out"></span>
</div>
</div>
</nav>
Main Page
<body>
<jsp:include page='TopNavigation.jsp'></jsp:include>
<div class="wrapper d-flex align-items-stretch">
<jsp:include page='SideNavigationManagement.jsp'></jsp:include>
<div id="content" class="p-4 p-md-5 pt-5">
<h2 class="mb-4">Sidebar #05</h2>
<p>Lorem ipsum </p>
</div>
</div>
</body>
CSS
#sidebar {
min-width: 270px;
max-width: 270px;
background: #3445b4;
color: #fff;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
position: fixed;
height:100%;
}
#content {
width: 100%;
padding: 0;
min-height: 100vh;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
margin-left:270px;
}
//TopCss .main_container .top_nav {
display: block;
margin-left: 270px;
}
.nav_menu {
float: left;
background: #EDEDED;
border-bottom: 1px solid #D9DEE4;
margin-bottom: 10px;
width: 100%;
position: relative;
}
.navbar-right {
margin-right: 0;
}
.top_nav .navbar-right {
margin: 0;
width: 70%;
float: right;
}
.top_nav .navbar-right li {
display: inline-block;
float: right;
position: static;
}
Result Image :
In the picture below you can see that my Skills text is in the section where it is not supposed to be which is the home-section
In the above picture, you can see that Skills has appeared in the section of the home. Note that I used Bootstrap row to style my content
Below is the html code ------- <-- I added bootstrap -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Portfolio</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styles.css" />
<script
src="https://kit.fontawesome.com/29ea37403a.js"
crossorigin="anonymous"
></script>
</head>
<body>
<section id="home-section">
<nav class="navbar navbar-expand-lg navbar-light">
<h1 class="navbar-brand">ᔕᗩᗰᑌᗴᒪ</h1>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="home-contect">
<h1 class="home-title">I have software development experience</h1>
<h5 class="home-description">
Hi! I'm a software developer - Developing elegant mobile sofwares
for companies all over the world
</h5>
<div class="button-con">
<button
type="button"
class="home-button btn btn-lg btn-warning download-button"
>
Let's Talk <i class="fa-solid fa-paper-plane"></i>
</button>
<button
type="button"
class="home-button btn btn-lg btn-outline-warning download-button">
Resume <i class="fa-solid fa-arrow-down"></i>
</button>
</div>
<div class="links">
<h6>Check Out My
<div class="home-icon-container" id="github"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-linkedin-in"></i></div>
<div class="home-icon-container"><i class="home-icon fa-brands fa-twitter"></i> </div>
</h6>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<img
class="personal-photo"
src="assets/portfolio-image.png"
alt="A picture of me"
/>
</div>
</div>
</section>
<section title="skill-section">
<h1>Skills</h1>
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Below is my css styling
/* Home Section */
#home-section{
padding-left: 10%;
padding-right: 10%;
}
h1{
text-align: left;
font-size: xxx-large;
}
.personal-photo{
position: absolute;
margin-left: 11%;
}
.btn{
margin-top: 15px;
}
.home-description{
text-align: left;
padding: 2% 0;
}
.home-button{
margin-right: 4px;
}
.home-icon{
color: black;
}
.home-icon-container#github{
margin-left: 20px;
}
.home-icon-container{
margin-top: 15px;
margin-right: 13px;
padding: 11px;
border-radius: 100%;
background-color: #dcedc8;
display: inline-block;
}
/* skill-section */
#skill-section{
background-color: gold;
padding: 5% 10%;
}
/* media-queries */
#media (min-width: 500){
.personal-photo{
width: 0px;
}
}
#media (max-width: 768px){
h1.home-title{
text-align: center;
}
.home-description{
text-align: center;
}
.button-con{
text-align: center;
}
.links{
text-align: center;
}
.personal-photo{
width: 50%;
}
}
The image has a display property of 'absolute'. MDN.
It may need more of a margin to avoid covering up the text, but you're probably better off using a different way to position the image instead of using absolute.
I have the problem where I cannot make my content div take up all the space of the content area.
I have a fixed footer and static header. The content div is actually inside the div from a RenderBody directive in ASP.Net Core MVC.
Here are what a couple of pages look like with the footer at the bottom:
So I actually don't mind that the blue content div does not come down to the bottom. I think I can take it or leave it.
But then I created this page with a big image in the content div:
In this last pic you can see the image goes into the footer and extends the height of the footer element from it's orginal 60px height.
Here is my style sheet:
html, body {
height: 100%;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
white-space:nowrap;
line-height: 60px;
}
.content {
background-color: cornflowerblue /*aliceblue*/;
border: 1px solid black;
padding:10px;
}
.title {
/*background-color: cornflowerblue;*/
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
/* anchor styles */
.nav-link, .dropdown-item {
color: blue !important;
}
.nav-link:hover, .dropdown-item:hover {
color: darkgreen !important;
background-color:aliceblue;
}
.green-header-nav{
color: black;
}
.green-header-nav:hover {
color: black;
}
.facebook-anchor {
color: #4267B2
}
.facebook-anchor:hover {
color: #4267B2
}
/* end anchor styles */
Here is my layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"
/>
<title>NeuroplasticityTherapies -
#ViewData["Title"]</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/font-awesome/css/fontawesome.min.css" />
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="row" style="background-color:black">
<div class="col-3">
<img src="~/Images/dark-blue-brain.jpg" />
</div>
<div class="col-9 text-center">
<div class="text-light" style="height:100%">
<h1>Neuroplasticity Therapies</h1>
<div style="border:1px solid green; padding:15px; border-radius:25px; display:inline-block;">
There are answers and where there are answers there is hope.
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light">
#*<a class="navbar-brand" href="#">Navbar</a>*#
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" asp-action="Index">
Neuroplasticity Therapies
</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-action="AboutTheFounder">
About The Founder
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Functional Neurology
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Functional Medicine</a>
<a class="dropdown-item" href="#">Neural Plasticity</a>
<a class="dropdown-item" href="#">Alternative Medicine</a>
<a class="dropdown-item" href="#">Integrative Medicine</a>
<a class="dropdown-item" href="#">Holistic Medicine</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Survey</a>
</li>
</ul>
</div>
</nav>
<div class="row bg-info">
<div class="col-sm-3" style="border:2px solid black; text-align:center;font-weight:bold">
Contact Us
</div>
<div class="col-sm-6" style="border:2px solid black; text-align:center;font-weight:bold; background-color:black;">
<a class="facebook-anchor"
href="https://www.facebook.com/groups/NeuroplasticityTherapies/"
target="_blank">
Like Us On Facebook
<i class="fab fa-facebook"></i>
</a>
</div>
<div class="col-sm-3" style="border:2px solid black; text-align:center;font-weight:bold">
<a class="green-header-nav" asp-action="BrainMap">
Brain Map</a>
</div>
</div>
<div class="container-fluid">
#RenderBody()
</div>
<footer id="footer" class="border-top footer text-muted">
<div class="container">
© 2020 - NeuroplasticityTherapies
</div>
</footer>
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
#*<script>
console.log(`footer.top: ${document.getElementById("footer").offsetTop}`);
var footer_top = document.getElementById("footer").offsetTop;
document.getElementById("content_div").style.bottom
= footer_top;
</script>*#
</body>
</html>
Here is a content page with the blue background for "About The Author":
#{
ViewData["Title"] = "AboutTheFounder";
}
<h1 class="title">About The Founder</h1>
<div id="content_div" class="content">
<b>Gemma Herbertson</b>
<p></p>
Gemma has received training from all different parts of the world to include:
<ul>
<li>Institute of Neuro-Physiological Psychology (UK)</li>
<li>Rhythmic Movement Therapy, JIAS (Denmark)</li>
<li>Family Hope Centre (USA)</li>
<li>Carrick Institute (USA)</li>
<li>Kharrazian Institute (USA)</li>
<li>Gillespie Approach (USA)</li>
<li>The Neuro Science Academy (Australia)</li>
</ul>
Her approach is to work from the <u>bottom-up</u>:
getting the brain to a healthy state
(well-fuelled with nutrients and oxygen),
and then providing individual neuroplasticity exercises
for optimum effect.
</div>
Here is the page with the image on it in the content area. The page is named "BrainMap". This one is raising the issue for me. I believe if there is too much content on any page I will run into this issue.
#{
ViewData["Title"] = "BrainMap";
}
<h1>BrainMap</h1>
<div id="content_div" class="content">
<img src="~/Images/brain_map.jpg" class="center" />
</div>
Don't know why I went down the road of color on the content background but I really want it now I think it is looking good.
You may try using the calc in CSS:
e.g.
if your header height = 100px, and footer = 80px fixed, then you can set your content height = calc(100% - 180px)
Refer: https://www.w3schools.com/cssref/func_calc.asp
html {
height: 100%;
}
body {
position: relative;
margin: 0;
padding-bottom: 60px;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px;
}
.content {
background-color: cornflowerblue /*aliceblue*/;
border: 1px solid black;
padding: 10px;
height: calc(100vh - 260px);
/*you can change 260px accordingly to your needs*/
}
...
Here is the result of this demo:
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">
{{username}} <span class="caret"></span>
<ul class="dropdown-menu">
<li>Sign Out</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><i class="fa fa-user-plus" aria-hidden="true"></i> Create Disc Account</li>
<li><i class="fa fa-address-card-o" aria-hidden="true"></i> Create Disc Role</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
}
So I'm using bootstrap to build a dashboard with a side nav bar. When the navbar is open, the container content is pushed to the right and out of the screen. I want the whole container to be resized to fit the screen. So whether navbar is open or collapsed, container should be fully visible. Is there a bootstrap css class I can add to body or container to fix that issue?
<body>
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<img src="assets/img/logo.png"></img>
</li>
<li>
<span class="icon icon-home"></span>Overview
</li>
<li>
<span class="icon icon-suitcase"></span>Account Management
</li>
<li>
<span class="icon icon-bar-graph"></span>Demand Planning
</li>
<li>
<span class="icon icon-box"></span>Inventory Planning
</li>
<li>
<span class="icon icon-light-bulb"></span>Vendor Management Invetory
</li>
<li>
<span class="icon icon-calculator"></span>Dashboards
</li>
<li>
<span class="icon icon-text-document">Reports
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
<div class="container">
<div class="dashhead">
<div class="dashhead-titles">
<div class="dashhead-toolbar">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
</div>
</form>
</div>
<h3 class="dashhead-title">Overview</h3>
</div>
</div>
<ul class="nav nav-bordered mt-4 mt-md-2 mb-0 clearfix" role="tablist">
<li class="nav-item" role="presentation">
Summary
</li>
</ul>
<hr class="mt-0 mb-5">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="traffic">
<div class="row text-center m-t-md">
<div class="col-lg-4"</div>
</div>
</div>
</div>
<style>
#sidebar-wrapper {
z-index: 1000;
left: 235px;
width: 0;
height: 100%;
margin-left: -235px;
overflow-y: auto;
overflow-x: hidden;
background: #252D3A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}
#wrapper.toggled #sidebar-wrapper {
width: 235px;}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -235px;}
#page-content-wrapper {
width: 100%;
padding-top: 20px;}
#sidebar-nav {
position: absolute;
top: 0;
width: 235px;
margin: 0;
padding: 0;
list-style: none;}
</style>
Please Change the value of css.
#wrapper.toggled #page-content-wrapper {
position: absolute;
width: calc(100% - 235px);
margin-left: 235px;
}