I have a basic admin dashboard i have been working at to try to show the top header and bottom footer all the time. I have that working, but the now the footer is hiding some content, and the menu on the left does a small shift when I scroll. Also when the view is too narrow the menu on the left goes away, and I cant use it, is there a way i can make it so it is accessible via a hamburger or something similar?
I am using Bootstrap 5.2 and jquery 3.6.0
Any ideas please? (see second tab)
You can see it in action here - https://plnkr.co/edit/ZwcVUveVW7hPeLHV
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BootStrap play</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<style>
/* Styles go here */
body, html {
height:100%;
}
footer{
pposition: absolute;
bbottom:0;
height: 50px;
ttransform: translateX(-40%);
z-index: 999;
background-color: red;
width: 100%;
}
.container-fluid, .row {
height: 100%;
}
#sidebar{
background-color: gray;
}
/*
* Off Canvas sidebar at medium breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 992px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
margin-left: -6px;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
height: 100%;
}
}
/*
* Off Canvas wider at sm breakpoint
* --------------------------------------------------
*/
@media screen and (max-width: 34em) {
.row-offcanvas-left
.sidebar-offcanvas {
left: -45%;
}
.row-offcanvas-left.active {
left: 45%;
margin-left: -6px;
}
.sidebar-offcanvas {
width: 45%;
}
}
.card {
overflow:hidden;
}
.card-body .rotate {
z-index: 8;
float: right;
height: 100%;
}
.card-body .rotate i {
color: rgba(20, 20, 20, 0.15);
position: absolute;
left: 0;
left: auto;
right: -10px;
bottom: 0;
display: block;
-webkit-transform: rotate(-44deg);
-moz-transform: rotate(-44deg);
-o-transform: rotate(-44deg);
-ms-transform: rotate(-44deg);
transform: rotate(-44deg);
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md navbar-dark bg-primary mb-3 ">
<div class="flex-row d-flex">
<button type="button" class="navbar-toggler mr-2 " data-toggle="offcanvas" title="Toggle responsive left sidebar">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#" title="Free Bootstrap 4 Admin Template">Admin Template</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapsingNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="//www.codeply.com">Link</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myAlert" data-toggle="collapse">Alert</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="main">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-md-3 col-lg-2 sidebar-offcanvas pl-0 " id="sidebar" role="navigation">
<ul class="nav flex-column sticky-top pl-0 " style="padding-top: 65px;">
<li class="nav-item"><a class="nav-link" href="#">Overview</a></li>
<li class="nav-item"><a class="nav-link" href="#">Analytics</a></li>
</ul>
</div>
<!--/col-->
<div class="col main pt-5 mt-3">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab_one" type="button" role="tab" aria-controls="tab_one" aria-selected="true">One</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab_two" type="button" role="tab" aria-controls="tab_two" aria-selected="false">Two</button>
</li>
</ul>
<div class="tab-content border" >
<div class="tab-pane fade show active " id="tab_one" role="tabpanel" >
<div class="container">
<div class="row">
Not much here
</div>
</div>
</div>
<div class="tab-pane fade " id="tab_two" role="tabpanel" >
<div class="container">
<div class="row">
content herecontent herecontent herecontent herecontent content herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent hereent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecocontent herecontent herecontent herecoherecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent herecontent here..
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="fixed-bottom">my footer</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" ></script>
</body>
</html>