Weird blank space next to navbar Bootstrap5
Question
After building this layout with a left-sided nav-bar menu, I found that a weird blank space is left between the navbar and the main content area. Does anyone know why that space appears and how to take it away?
Here is the code snippet: https://bbbootstrap.com/snippets/bootstrap-5-sidebar-menu-toggle-button-34132202
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 }.nav_link:hover { color: var(--white-color) }.nav_icon { font-size: 1.25rem }.show { left: 0 }.body-pd { padding-left: calc(var(--nav-width) + 1rem) }.active { color: var(--white-color) }.active::before { content: ''; position: absolute; left: 0; width: 2px; height: 32px; background-color: var(--white-color) }.height-100 { height: 100vh } @media screen and (min-width: 768px) { body { margin: calc(var(--header-height) + 1rem) 0 0 0; padding-left: calc(var(--nav-width) + 2rem) }.header { height: calc(var(--header-height) + 1rem); padding: 0 2rem 0 calc(var(--nav-width) + 2rem) }.header_img { width: 40px; height: 40px }.header_img img { width: 45px }.l-navbar { left: 0; padding: 1rem 1rem 0 0 }.show { width: calc(var(--nav-width) + 156px) }.body-pd { padding-left: calc(var(--nav-width) + 188px) } }
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <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 href="./css/navlayout.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"> <link rel="icon" href="./img/icon.png" /> <title>Basic - Bootstrap 5 with Gulp 4</title> </head> <body id="body-pd"> <header class="header" id="header"> <div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div> <div class="header_img"> <img src="https://i.imgur.com/hczKIze.jpg" alt=""> </div> </header> <div class="l-navbar" id="nav-bar"> <nav class="nav"> <div> <a href="#" class="nav_logo"> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span> </a> <div class="nav_list"> <a href="#" class="nav_link active"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> </a> <a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a> <a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a> <a href="#" class="nav_link"> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </a> </div> </div> <a href="#" class="nav_link"> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span> </a> </nav> </div> <:--Container Main start--> <div class="height-100 bg-light"> <h4>Main Components</h4> </div> <.--Container Main end--> <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> <script src="./js/navlayout.js"></script> </body>
1 answers
solution1
0 2022-01-22 20:40:39
Here you go... Comments are added in the snippet below.
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 0; /* Change "0 1rem" to "0 0". */ 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 }.nav_link:hover { color: var(--white-color) }.nav_icon { font-size: 1.25rem }.show { left: 0 }.body-pd { padding-left: calc(var(--nav-width) + 1rem) }.active { color: var(--white-color) }.active::before { content: ''; position: absolute; left: 0; width: 2px; height: 32px; background-color: var(--white-color) }.height-100 { height: 100vh } @media screen and (min-width: 768px) { body { margin: calc(var(--header-height) + 1rem) 0 0 0; padding-left: calc(var(--nav-width) + 0rem); /* Change "calc(var(--nav-width) + 2rem" to "calc(var(--nav-width) + 0rem". */ }.header { height: calc(var(--header-height) + 1rem); padding: 0 2rem 0 calc(var(--nav-width) + 2rem) }.header_img { width: 40px; height: 40px }.header_img img { width: 45px }.l-navbar { left: 0; padding: 1rem 1rem 0 0 }.show { width: calc(var(--nav-width) + 156px) }.body-pd { padding-left: calc(var(--nav-width) + 188px) } } /* Add this. */ #title { margin-left: 2rem; /* The same as header padding-left (ie, 2rem). */ margin-top: 4rem; /* The same as header height (ie, 3rem + 1rem). */ }
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <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 href="./css/navlayout.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" rel="stylesheet"> <link rel="icon" href="./img/icon.png" /> <title>Basic - Bootstrap 5 with Gulp 4</title> </head> <body id="body-pd"> <header class="header" id="header"> <div class="header_toggle"> <i class='bx bx-menu' id="header-toggle"></i> </div> <div class="header_img"> <img src="https://i.imgur.com/hczKIze.jpg" alt=""> </div> </header> <div class="l-navbar" id="nav-bar"> <nav class="nav"> <div> <a href="#" class="nav_logo"> <i class='bx bx-layer nav_logo-icon'></i> <span class="nav_logo-name">BBBootstrap</span> </a> <div class="nav_list"> <a href="#" class="nav_link active"> <i class='bx bx-grid-alt nav_icon'></i> <span class="nav_name">Dashboard</span> </a> <a href="#" class="nav_link"> <i class='bx bx-user nav_icon'></i> <span class="nav_name">Users</span> </a> <a href="#" class="nav_link"> <i class='bx bx-message-square-detail nav_icon'></i> <span class="nav_name">Messages</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bookmark nav_icon'></i> <span class="nav_name">Bookmark</span> </a> <a href="#" class="nav_link"> <i class='bx bx-folder nav_icon'></i> <span class="nav_name">Files</span> </a> <a href="#" class="nav_link"> <i class='bx bx-bar-chart-alt-2 nav_icon'></i> <span class="nav_name">Stats</span> </a> </div> </div> <a href="#" class="nav_link"> <i class='bx bx-log-out nav_icon'></i> <span class="nav_name">SignOut</span> </a> </nav> </div> <:--Container Main start--> <div class="height-100 bg-light"> <h4 id="title">Main Components</h4> </div> <.--Container Main end--> <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> <script src="./js/navlayout.js"></script> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
how to collapse navbar onclick (bootstrap5)
Angular 13 Bootstrap5 Navbar not functioning
Bootstrap5 tab content on second tab creates unlimited white space
Space behind bootstrap navbar
Bootstrap5 modal not showing
Bootstrap navbar, full height navbar-collapse but with weird animation
Bootstrap5 Carousel with await promise
Jquery Mobile weird space appears when I click blank areas
Select2 search input not working on bootstrap5
close offcanvas navigation bar on a click bootstrap5
Related Tags