I'm trying to create a sticky sidebar on the right. The sidebar menu is inside a grid column. I'm using the sticky-top
class as shown in this question, but it still doesn't work.
Here's the code...
<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>
Codeply: https://codeply.com/go/xwYPD1B1tk
The menu
div is the one I'd like to stick to the top as the user scrolls down.
Position sticky will not work if any of the parent containers of the sticky element use overflow:hidden
. Removing the overflow-hidden
class from the container allows the sticky-top
to work.
<div class="container min-vh-100">
<nav class="navbar navbar-light navbar-expand">
..
</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">
...
</div>
</div>
</div>
</div>
</div>
https://codeply.com/go/9Nf6pOa7TN
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With