I'm currently learning Bootstrap, HTML and CSS but I encountered this error. I want my sidebar to have sticky but it appears not working and stick to left. I tried position sticky and set left:0 but still didn't helped.
body {
background-color: #e6e5e4;
}
/* Sidebar */
.sidebar {
background: #494949;
display: flex;
flex-shrink: 0;
flex-direction: column;
height: 100%;
position: sticky;
left: 0;
overflow-y: auto;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-thumb {
background: rgb(254, 254, 254);
border-radius: 10px;
}
/* */
a {
text-decoration: none;
}
#logout {
align-items: end;
bottom: 0;
}
.icon {
color: #ffffff;
}
/* Dropdown */
.dropdown-toggle::after {
display: none;
}
/* Animation */
li:hover {
background-color: #302e2e;
transition: all 0.5s ease;
}
/* Adminbox */
.adminbox {
background-color: #ffffff;
padding: 10px;
box-shadow: 10px 0 5px 0.5px #302e2e;
}
#avataradmin {
object-fit: contain;
max-width: 50px;
border-radius: 50%;
}<body class="d-flex">
<!-- SIDEBAR -->
<aside class="d-flex">
<div class="sidebar p-3">
<!-- Logo -->
<a routerLink="/" class="d-flex justify-content-center pb-4">
<img src="assets/admin/logo.png" style="height: 100px" />
</a>
<hr style="color: white" />
<ul class="menu nav nav-pills flex-column mb-auto pt-3">
<li class="nav-link mb-3" style="background-color: #302e2e">
<a routerLink="/dashboard" routerLinkActive="active">
<span class="icon"> <i class="fa-solid fa-house"></i></span>
<span class="text-white pe-4 ps-3">Dashboard</span>
</a>
</li>
<li class="nav-link mb-3">
<a routerLink="/customers">
<span class="icon"><i class="fa-solid fa-user"></i> </span>
<span class="text-white pe-4 ps-3">Customers</span>
</a>
</li>
<!-- Dropdown -->
<li class="nav-link mb-3">
<a routerLink="/products" class="dropdown-toggle" data-bg-toggle="dropdown" data-bs-toggle="dropdown" aria-expanded="false">
<span class="icon"><i class="fa-solid fa-bag-shopping"></i> </span>
<span class="text-white pe-4 ps-3">Products</span>
<i class="fa-solid fa-circle-chevron-down" style="color: #ffffff"></i>
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-link mb-3">
<a routerLink="/orders">
<span class="icon"><i class="fa-solid fa-receipt"></i> </span>
<span class="text-white pe-4 ps-3">Orders</span>
</a>
</li>
<li class="nav-link mb-3">
<a routerLink="/categories">
<span class="icon"> <i class="fa-brands fa-elementor"></i></span>
<span class="text-white pe-4 ps-3">Categories</span>
</a>
</li>
<li class="nav-link" id="logout">
<a routerLink="/categories">
<span class="icon">
<i class="fa-solid fa-right-from-bracket"></i
></span>
<span class="text-white pe-4 ps-3">Logout</span>
</a>
</li>
</ul>
</div>
</aside>
<!-- CONTENT -->
<!-- ADMINBOX -->
<div class="container-fluid p-0">
<div class="adminbox">
<div class="d-flex flex-row">
<div class="logo ms-5">
<img id="avataradmin" src="assets/admin/avatar.jpg" />
</div>
<div class="col ps-3">
<div class="fw-bold text-uppercase">Xin chào</div>
<div class="fw-light">Chức vụ</div>
</div>
</div>
</div>
<!-- insert content -->
<app-product-detail></app-product-detail>
</div>
</body>I tried position fixed but it didn't help my case. Here is the outcome of my code: Before scrolling After scrolling down
You should set
heightto100vh, in order to use the viewport height, and usetop: 0instead ofleftsince you're using sticky positioning.