Odd gap beside Bootstrap5 navbar that needs fixing

Question

Odd gap beside Bootstrap5 navbar that needs fixing

While working on a layout featuring a left-sided nav-bar menu, I encountered an odd blank space between the navbar and the main content area. Can anyone shed light on why this space appears and how to eliminate it?

For reference, here is the code snippet:

https://i.sstatic.net/vsIDf.png

document.addEventListener("DOMContentLoaded", function(event) {

  const showNavbar = (toggleId, navId, bodyId, headerId) => {
    const toggle = document.getElementById(toggleId),
      nav = document.getElementById(navId),
      bodypd = document.getElementById(bodyId),
      headerpd = document.getElementById(headerId)

    // Validate that all variables exist
    if (toggle && nav && bodypd && headerpd) {
      toggle.addEventListener('click', () => {
        // show navbar
        nav.classList.toggle('show')
        // change icon
        toggle.classList.toggle('bx-x')
        // add padding to body
        bodypd.classList.toggle('body-pd')
        // add padding to header
        headerpd.classList.toggle('body-pd')
      })
    }
  }

  showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

  /*===== LINK ACTIVE =====*/
  const linkColor = document.querySelectorAll('.nav_link')

  function colorLink() {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active')
    }
  }
  linkColor.forEach(l => l.addEventListener('click', colorLink))

  // Your code to run since DOM is loaded and ready
});

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
:root {
  --header-height: 3rem;
  --nav-width: 68px;
  --first-color: #4723D9;
  --first-color-light: #AFA5D9;
  --white-color: #F7F6FB;
  --body-font: 'Nunito', sans-serif;
  --normal-font-size: 1rem;
  --z-fixed: 100
}

*,
::before,
::after {
  box-sizing: border-box
}

body {
  position: relative;
  margin: var(--header-height) 0 0 0;
  padding: 0 1rem;
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  transition: .5s
}

a {
  text-decoration: none
}

.header {
  width: 100%;
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  background-color: var(--white-color);
  z-index: var(--z-fixed);
  transition: .5s
}

.header_toggle {
  color: var(--first-color);
  font-size: 1.5rem;
  cursor: pointer
}

.header_img {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden
}

.header_img img {
  width: 40px
}

.l-navbar {
  position: fixed;
  top: 0;
  left: -30%;
  width: var(--nav-width);
  height: 100vh;
  background-color: var(--first-color);
  padding: .5rem 1rem 0 0;
  transition: .5s;
  z-index: var(--z-fixed)
}

.nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden
}

.nav_logo,
.nav_link {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 1rem;
  padding: .5rem 0 .5rem 1.5rem
}

.nav_logo {
  margin-bottom: 2rem
}

.nav_logo-icon {
  font-size: 1.25rem;
  color: var(--white-color)
}

.nav_logo-name {
  color: var(--white-color);
  font-weight: 700
}

.nav_link {
  position: relative;
  color: var(--first-color-light);
  margin-bottom: 1.5rem;
  transition: .3s
}

...

</body>

javascript html css bootstrap-5

Answer 1

Answer №1

Here is the code snippet with added comments:

document.addEventListener("DOMContentLoaded", function(event) {

  const showNavbar = (toggleId, navId, bodyId, headerId) => {
    const toggle = document.getElementById(toggleId),
      nav = document.getElementById(navId),
      bodypd = document.getElementById(bodyId),
      headerpd = document.getElementById(headerId)

    // Ensure all variables exist
    if (toggle && nav && bodypd && headerpd) {
      toggle.addEventListener('click', () => {
        // Show navbar
        nav.classList.toggle('show')
        // Change icon
        toggle.classList.toggle('bx-x')
        // Add padding to body
        bodypd.classList.toggle('body-pd')
        // Add padding to header
        headerpd.classList.toggle('body-pd')
      })
    }
  }

  showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

  /*===== LINK ACTIVE =====*/
  const linkColor = document.querySelectorAll('.nav_link')

  function colorLink() {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active')
    }
  }
  linkColor.forEach(l => l.addEventListener('click', colorLink))

  // Your additional code here for when DOM is loaded and ready
});

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
:root {
  --header-height: 3rem;
  --nav-width: 68px;
  --first-color: #4723D9;
  --first-color-light: #AFA5D9;
  --white-color: #F7F6FB;
  --body-font: 'Nunito', sans-serif;
  --normal-font-size: 1rem;
  --z-fixed: 100
}

/* Remaining CSS styles unchanged */

/* Add this. */
#title {
  margin-left: 2rem; /* The same as header padding-left (i.e., 2rem). */
  margin-top: 4rem; /* The same as header height (i.e., 3rem + 1rem). */
}

<head>
  <meta charset="UTF-8" />
  <!-- Other meta tags and links have been untouched for brevity -->
</head>

<!-- Body content remains mostly the same with minor adjustments -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/navlayout.js"></script>

Answer 2

Here is the code snippet with added comments:

document.addEventListener("DOMContentLoaded", function(event) {

  const showNavbar = (toggleId, navId, bodyId, headerId) => {
    const toggle = document.getElementById(toggleId),
      nav = document.getElementById(navId),
      bodypd = document.getElementById(bodyId),
      headerpd = document.getElementById(headerId)

    // Ensure all variables exist
    if (toggle && nav && bodypd && headerpd) {
      toggle.addEventListener('click', () => {
        // Show navbar
        nav.classList.toggle('show')
        // Change icon
        toggle.classList.toggle('bx-x')
        // Add padding to body
        bodypd.classList.toggle('body-pd')
        // Add padding to header
        headerpd.classList.toggle('body-pd')
      })
    }
  }

  showNavbar('header-toggle', 'nav-bar', 'body-pd', 'header')

  /*===== LINK ACTIVE =====*/
  const linkColor = document.querySelectorAll('.nav_link')

  function colorLink() {
    if (linkColor) {
      linkColor.forEach(l => l.classList.remove('active'))
      this.classList.add('active')
    }
  }
  linkColor.forEach(l => l.addEventListener('click', colorLink))

  // Your additional code here for when DOM is loaded and ready
});

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
:root {
  --header-height: 3rem;
  --nav-width: 68px;
  --first-color: #4723D9;
  --first-color-light: #AFA5D9;
  --white-color: #F7F6FB;
  --body-font: 'Nunito', sans-serif;
  --normal-font-size: 1rem;
  --z-fixed: 100
}

/* Remaining CSS styles unchanged */

/* Add this. */
#title {
  margin-left: 2rem; /* The same as header padding-left (i.e., 2rem). */
  margin-top: 4rem; /* The same as header height (i.e., 3rem + 1rem). */
}

<head>
  <meta charset="UTF-8" />
  <!-- Other meta tags and links have been untouched for brevity -->
</head>

<!-- Body content remains mostly the same with minor adjustments -->

<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="./js/navlayout.js"></script>

Odd gap beside Bootstrap5 navbar that needs fixing

Answer №1

Similar questions

Ways to utilize JavaScript to identify if a flash is launching in a separate tab

Retrieve the total count of rows present in a specific table

Error: Property cannot be read after page refresh or modification

Utilizing a React Hook to set data by creating a pure function that incorporates previous data using a thorough deep comparison methodology

I'm struggling to achieve the placement of my logo and navigation bar side by side

The Github page is continuously loading without displaying any content

Struggling to unlock the mystery of a jammed trigger box

Expanding CSS styles on hover

Selenium is encountering a validation error when selecting a value from a Drop Down menu

Tips on arranging an array based on dates and data in JavaScript?

Ensure that the user's browser cache is cleared after deploying a new version on Firebase hosting

Reverse all elements on the page except for ::selection

Leverage and repurpose OOP objects

JS problem with decreasing

Managing numerous range sliders in a Django form

Manipulate a 3D shape by transforming both the x and y axes using jQuery's mousemove

Modifying a JavaScript code with document.write(variable)

While utilizing Ajax with Spring, it is possible to send a JavaScript object and receive it as a custom object. However, there was an issue with

Connecting node.js to a MySQL database on a WAMP/XAMPP server: A step-by-step guide

Utilizing local storage, store and access user's preferred layout options through a click function