Search code examples
htmlcsstwitter-bootstrapbootstrap-4sticky

Bootstrap 4, navbar fixed-top and other sticky-top elements

Here the reproduction: https://jsbin.com/lawafu/edit?html,output

Is this a bug? A mistake? A problem? An unrealizable idea?

Before scroll: before

After scroll: after

What I need:

Obviously I need to see the sidebar when I scroll down the page, using padding-top of the body for the fixed-top navbar.

I'm using this code for the sidebar:

<div class="sticky-top">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Solution

  • Bootstrap sticky-top has no offset for the Navbar since it sets top:0. You can add a custom class to account for the Navbar height.

    .sticky-offset {
    top: 56px;
}

<div class="sticky-top sticky-offset">
  <ul class="list-group">
    <li class="list-group-item active">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

    Demo: https://www.codeply.com/go/QeJOvbYswd

    Related: Bootstrap 4 fixed top nav and fixed sidebar