I'm looking to keep one column sticky in a two-column grid setup. My goal is to create a vertical navigation bar that's specific to a particular div within a single-page site, with a fixed horizontal navbar across the entire page. However, I'm having trouble getting the sticky behavior to work.
I've set up a div called strategy-container, with two nested divs using grid. I want the div with the sidebar class to be sticky.
I know this will make it stick to its parent div, namely the strategy-container div.
But for some reason, the side navigation is also moving.
The strategy container is positioned relatively with visible overflow.
Any ideas on why this is happening?
.strategy-container {
position: relative;
overflow: visible;
}
.sidenav {
/* Full-height: remove this if you want "auto" height */
/* Set the width of the sidebar */
position: sticky;
/* Fixed Sidebar (stay in place on scroll) */
z-index: 1;
/* Stay on top */
top: 50px;
/* Stay at the top */
left: 0;
background-color: red;
overflow-x: hidden;
padding-top: 20px;
}<div id="about" class="container-fluid strategy-container">
<div class="row">
<div class="col-sm-4 col-md-3 sidenav">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<div class="col-sm-9">
<!-- Content to be scrolled -->
</div>
</div>
</div>Could it be because the column sticks to the row div as its parent? How can I achieve the desired result?
Thank you :).