How the Bootstrap 4 navigation bar impacts the layout of your content

Question

How the Bootstrap 4 navigation bar impacts the layout of your content

I am facing an issue where the content on my page is being pushed down by the navbar, resulting in a small scroll gap at the bottom of the page.

https://i.sstatic.net/6oLTY.jpg

I want all the content to fill the page without having an unnecessary scrollbar like in the image above. The navbar at the top of the page is a basic Bootstrap navbar with the body utilizing code from Bootsnipp. It consists of a side navigation and content area that I have customized and added a responsive toggle button to.

The problem arises from applying position: absolute to #sidebar-wrapper, which fixes the side nav to the top of the page. I have experimented with changing the layout order and positioning, as well as enclosing the header-navbar and content inside a wrapper, but with limited success.

https://i.sstatic.net/lTFM0.gif

The gif above depicts the issue I faced before using position: absolute. However, this is only a temporary solution because when the window is resized vertically, the side-nav does not remain fixed to the bottom of the page.

Below is a snippet of the view causing the problem.

Thank you for your time, and I am willing to provide more information if needed.

// JavaScript code snippet here

// CSS code snippet here

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

I have modified the CSS for your navbar positioning to fixed. Hopefully, this change resolves the issue you were facing.

<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">
                    ...

Answer 2

I have modified the CSS for your navbar positioning to fixed. Hopefully, this change resolves the issue you were facing.

<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">
                    ...

Answer 3

Answer №2

The issue arises from the height: 100% setting for #sidebar-wrapper. To fix this, we simply reduce the height of #sidebar-wrapper by the height of the <header>, resulting in just one change to your CSS:

height: calc(100% - 64px);

Here is the complete snippet:

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/pop...

Answer 4

The issue arises from the height: 100% setting for #sidebar-wrapper. To fix this, we simply reduce the height of #sidebar-wrapper by the height of the <header>, resulting in just one change to your CSS:

height: calc(100% - 64px);

Here is the complete snippet:

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/pop...

How the Bootstrap 4 navigation bar impacts the layout of your content

Answer №1

Answer №2

Similar questions

Display a form with hidden input that dynamically updates on any input change

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

Instant website updates powered by MySQL

Currently focusing on improving the responsiveness of the navigation bar and grid layout

How can I use JQuery to iterate through Object data and dynamically create tr and td elements?

JS Nav Dots are not activating the Active Class

Stylish slanted divs achieved using Bootstrap 4

The Chrome browser on iOS does not fire the Image onLoad event

set available date with angular bootstrap datetimepicker

Validation with Javascript can trigger the display of a hidden element

Ensuring form input validity in real-time using jQuery's keyup event

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Is resizing images using HTML/CSS more effective than tools like Fireworks?

Storing a webpage in HTML with the use of @import function in CSS

How to use JQuery to parse an external JSON file with array elements in Javascript

ACTUAL preventing a component from losing its focus

Mobile devices seem to be constantly refreshing website images

Visibility of image changes after selecting from dropdown menu

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Wrapping a table within an article element