My sidebar in Bootstrap didn't fill the entire column because I forgot to set a specific width for it.
Here is the CSS code for my sidebar:
.sidebar {
position: fixed;
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */ /* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
@supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
Here is how my HTML structure looks like:
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
I am currently using Bootstrap version 4.6 and the full code can be found on GitHub:
CSS: https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/assets/css/sidebar.css
Full HTML: https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/goal.ejs
Update:
I have removed the position:fixed and replaced it with height:100%, but now when I scroll, the sidebar content also scrolls.
I am using Node.js, Express.js, and EJS as the view engine. Thank you in advance!