Bootstrap 4 fixed top nav and fixed sidebar
The sticky-top
is working, but it doesn't appear to be working for two reasons...
- There isn't enough content in the main content area to scroll
- It's positioned at
top:0
so it hides behind the fixed navbar
Add CSS to offset the top of the sidebar (the same as height of fixed navbar).
.sticky-offset {
top: 56px;
}
<ul class="list-group sticky-top sticky-offset">..(sidebar)..</div>
And, then add enough content (or height) in the main area so that scrolling is necessary...
Working Demo: https://www.codeply.com/go/7XYosZ7VH5
<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
..
</nav>
<div class="row">
<div id="sidebar-container" class="sidebar-expanded col-2 d-none d-md-block">
<ul class="list-group sticky-top sticky-offset">
<li>Menu item..</li>
<li>Menu item..</li>
</ul>
</div>
<div class="col">
<!-- MAIN -->
</div>
</div>
There's a relatively new CSS position property called sticky
.
position: sticky;
top: 4em;
See how this works, what happens when you scroll to the end of the parent element. Leave height at auto
. Reference - https://developer.mozilla.org/en-US/docs/Web/CSS/position