Bootstrap 4 sticky-top class on navbar not working

It's not working because the parent "main" container doesn't have any significant height. If you move your 2000px height div into main it will work, and sticky-top should be used on the element that is an immediate child of "main".

Demo: https://codeply.com/go/5aDkGY8KjI

<div class="main">
    <div class="header-firstnav">
        <nav class="navbar navbar-expand-lg">
             ...
        </nav>
    </div>

    <div class="header-secondnav sticky-top">
        <nav class="navbar navbar-expand-lg">
             ...
        </nav>
    </div>

    <div>content with height...</div>
</div>
<footer></footer>

Also note: sticky-top will not work if any of the parents have overflow: hidden

Related: How to place navbar below sticky navbar using bootstrap 4?


From https://github.com/twbs/bootstrap/issues/21919

.sticky-top will not work if it is inside any container. It must be the outside-most element inside <body>

These examples work:

<body>
    <header class="sticky-top">
        <nav class="navbar navbar-light bg-light p-0"> 
            ... 
        </nav>
    </header>
...
</body>

and

<body>
    <nav class="navbar sticky-top navbar-light bg-light p-0">
        ...
    </nav>
...
</body>

One more thing to check is if any parent element has one of these css properties set:

overflow overflow-y overflow-x If this property is set to one of these vales it will NOT work: auto, hidden, overlay, scroll.

The best solution is to remove it or change its value to 'unset' enter image description here

Tags:

Html

Css

Twitter Bootstrap

Bootstrap 4

Recent Posts