Bootstrap 4 fixed top nav and fixed sidebar

Question

This is a great example of how to create a navbar with a sidebar. Can anyone modify the code so that the top nav is top-fixed and the sidebar fixed/static with only the main page content scrolling? I can make the nav the nav top-fixed by assigning the class="fixed-top" to the nav, but I can't figure out how to make the sidebar fixed so that it remains in the same spot instead of scrolling up with the main page content. Applying class="sticky-top" to the sidebar doesn't seem to work.

<nav class="navbar navbar-expand-md navbar-dark bg-primary fixed-top">
    ..
</nav>
<div class="row">
    <div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
        <ul class="list-group sticky-top">
            <li>Menu item..</li>
            <li>Menu item..</li>
        </ul>
    </div>
    <div class="col">
        <!-- MAIN -->
    </div>
</div>

https://www.codeply.com/go/LFd2SEMECH

Skiffle

Answer 1

The sticky-top is working, but it doesn't appear to be working for two reasons...

1. There isn't enough content in the main content area to scroll
2. 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>

Maxfield

Thank you very much. Works great. I added a bunch of content in my own example, but I had the sticky offset on the wrong element. I had it on the sidebar-container element, and was missing the sticky offset as you suggested. – Skiffle

Off topic, but is there a single term used to refer to the top bar and side bar together? – Pithead

Seems like your sidebar width is fixed on both collapsed state and expanded state. – Vareck

Answer 2

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

Achernar