Bootstrap 4 navbar pushing content down - html

Question

The issue that I'm having is that the content on my page is being pushed down by the navbar creating a small scroll gap at the bottom of the page.
I'd like to have all the content fill the page without the unnecessary scroll bar in the above image. The navbar at the top of the page is a basic Bootstrap navbar with the body making use of this code I copied from Bootsnipp consisting of a side navigation and content area, which I have modified and added a responsive toggle button.
The issue is being caused by applying position: absolute to #sidebar-wrapper which fixes the side nav to the top of the page. I have tried changing the order and positioning of the layout as well as placing the header-navbar and content inside of a wrapper with little success.
The above gif is the issue that I was having before applying position: absolute although this is only a temporary fix as when the window is resized vertically the side-nav doesn't stay fixed to the bottom of the page.
Below is a snippet of the view in question.
Thank you for your time and I will be happy to provide any further information if needed
var AccountNav = (function() {
var wWidth
$(document).ready(function() {
$('#submenu-toggle').click(function(e) {
e.preventDefault()
$('#wrapper').toggleClass('toggled')
})
getWindowWidth()
ToggleNavBar()
})
$(window).resize(function() {
getWindowWidth()
console.log(wWidth)
ToggleNavBar()
})
function ToggleNavBar() {
if (wWidth >= 768) {
$('#toggle-navbar').css("display", "none")
} else {
$('#toggle-navbar').css("display", "flex")
if ($('#wrapper').hasClass('toggled')) {
$('#wrapper').toggleClass('toggled')
}
}
}
function getWindowWidth() {
wWidth = $(window).width()
}
})();
html,
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<header>
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style=" enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg> BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter" class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper" style="position:absolute">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
Accounts
</li>
<li>
Transfers
</li>
<li>
Loans
</li>
<li>
Account options
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>

Answer 1

I've changed your navbar position css to fixed, i hope this is the solution that you are looking for
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<body>
<header>
<nav class="navbar navbar--fixed navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"
style="enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path
d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg>
BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter"
class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax
Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
Accounts
</li>
<li>
Transfers
</li>
<li>
Loans
</li>
</li>
<li>
Account options
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
<style>
html,
body {
overflow-x: hidden;
}
.navbar--fixed {
position: fixed;
width: 100%;
z-index: 1100;
}
#toggle-navbar {
position: fixed;
height: 110px;
background: white;
z-index: 1050;
width: 100%;
}
#submenu-toggle {
margin-top: 64px;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
overflow-x: hidden;
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media (max-width: 768px) {
#sidebar-wrapper {
height: calc(100vh - 110px);
margin-top: 110px;
}
.container-fluid {
margin-top: 110px;
}
}
#media (min-width: 768px) {
.sidebar-nav {
margin-top: 64px;
}
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
height: 100%;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
</style>
<script>
var AccountNav = (function () {
var wWidth;
$(document).ready(function () {
$("#submenu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
getWindowWidth();
ToggleNavBar();
});
$(window).resize(function () {
getWindowWidth();
console.log(wWidth);
ToggleNavBar();
});
function ToggleNavBar() {
if (wWidth >= 768) {
$("#toggle-navbar").css("display", "none");
} else {
$("#toggle-navbar").css("display", "flex");
if ($("#wrapper").hasClass("toggled")) {
$("#wrapper").toggleClass("toggled");
}
}
}
function getWindowWidth() {
wWidth = $(window).width();
}
})();
</script>

Answer 2

The issue is caused by height: 100% for #sidebar-wrapper - we just reduce the height of #sidebar-wrapper by the height of the <header> which brings us to one change in your CSS:
height: calc(100% - 64px);
complete snippet below:
var AccountNav = (function() {
var wWidth;
$(document).ready(function() {
$("#submenu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
getWindowWidth();
ToggleNavBar();
});
$(window).resize(function() {
getWindowWidth();
console.log(wWidth);
ToggleNavBar();
});
function ToggleNavBar() {
if (wWidth >= 768) {
$("#toggle-navbar").css("display", "none");
} else {
$("#toggle-navbar").css("display", "flex");
if ($("#wrapper").hasClass("toggled")) {
$("#wrapper").toggleClass("toggled");
}
}
}
function getWindowWidth() {
wWidth = $(window).width();
}
})();
html,
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-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 {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: calc(100% - 64px);
margin-left: -250px;
overflow-y: auto;
background: #000;
-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: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
color: #fff
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<header>
<nav class="navbar navbar--fixed navbar-expand-md bg-dark navbar-dark py-1">
<div class="container">
<!-- Brand -->
<a asp-controller="home" asp-action="index" class="navbar-brand">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background: new 0 0 32 32;" xml:space="preserve" fill="white">
<g id="logo" class="logo">
<path
d="M2 20h20v2H2v-2zm2-8h2v7H4v-7zm5 0h2v7H9v-7zm4 0h2v7h-2v-7zm5 0h2v7h-2v-7zM2 7l10-5 10 5v4H2V7zm2 1.236V9h16v-.764l-8-4-8 4zM12 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</g>
</svg> BankNet
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a asp-controller="Home" asp-action="Index" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a asp-controller="Home" asp-action="Features" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false">
Utilities
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a asp-controller="Utilities" asp-action="CurrencyConverter" class="dropdown-item">Currency Converter</a>
<a asp-controller="Utilities" asp-action="TaxCalculator" class="dropdown-item">Tax
Calculator</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li href="#" class="nav-link">
<a asp-controller="Account" asp-action="Account" class="nav-link">Account</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main role="main" class="pb-3">
<nav class="navbar p-1" id="toggle-navbar">
<div class="nav-item">
<a class="btn btn-dark text-light" id="submenu-toggle">Toggle Menu</a>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Hello {Name}
</li>
<li>
Accounts
</li>
<li>
Transfers
</li>
<li>
Loans
</li>
</li>
<li>
Account options
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
<h1>Hello World</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</body>