My goal is to implement a sticky sidebar on the right side of the page. The sidebar menu is contained within a grid column. I have attempted to utilize the sticky-top class, following the guidance provided in this question, but unfortunately, it does not seem to be functioning as intended.
Below is the code snippet...
<div class="container min-vh-100 overflow-hidden">
<nav class="navbar navbar-light navbar-expand">
<a class="navbar-brand" href="#">Brand</a>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
</ul>
</nav>
<div class="row">
<div class="col-sm-8 content pt-4">
...
</div>
<div class="col-sm-4">
<div class="menu sticky-top p-3 bg-light">
<h5 class="text-primary">Sticky menu</h5>
<div class="nav flex-column">
<a href="#" class="nav-link pl-0">Menu 1</a>
<a href="#" class="nav-link pl-0">Menu 2</a>
<a href="#" class="nav-link pl-0">Menu 3</a>
</div>
</div>
</div>
</div>
</div>
View it on Codeply:
The menu div is the element that I want to remain fixed at the top while the user scrolls down the page.