Why Is My .Sticky-Top Class Not Working in Bootstrap 4

Why is my .sticky-top class not working in Bootstrap 4?

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'

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?

Bootstrap 4 sticky-top stops working

By default, Bootstrap columns are set to 100% of the height of their parent element. By wrapping the cards in the second column in an additional div element, you changed the parent container that the ".sticky-top" class is referencing from the Bootstrap column to the ".tags" div. If you want to keep the ".tags" div, create a rule in your CSS file so that it will match the height of its parent column:

.tags {
  height: 100%;
}

Or just use the Bootstrap ".h-100" class in your opening ".tags" div to accomplish the same thing:

<div class="tags h-100">

Edit: As "ajax333221" demonstrated (jsfiddle.net/8pLfg5n1), the two preceding solutions cause the ".tags" div to overflow its parent container. This happens because the top card in the second column is outside the ".tags" div. Thus, the parent column height assigned to ".tags" begins where the first card ends rather than at the top of the column.

Since a jQuery library is already necessary for many Bootstrap 4 features, it can be utilized here to calculate and assign a custom height to the ".tags" div to fit the remaining space in the parent container:

$(document).ready(function(){
    var colHeight;
    //Get column height
    $('.tags').each(function(){ 
      colHeight = $(this).parent().height();
    });
    //Subtract height of cards preceding .tags div
    $('.topCard').each(function(){
      colHeight -= $(this).height();
    });
    /*Set .tags div height to remaining space in 
    column to prevent overflow*/
    $('.tags').each(function(){
      $(this).css('height', colHeight);
    });
 }); 

This script utilizes a ".topCard" class that I added to the visible cards in the same column above ".tags" in order to differentiate them.

<div class="card bg-primary w-100 topCard">

Here is the updated version of the demo provided by "ajax333221": https://jsfiddle.net/8pLfg5n1/33/

Bootstrap sticky-top class not work inside main-content class

As you said you cannot use sticky-top class with a container having overflow: hidden and you HAVE to use main-content, you can unset the overflow property of main-content. Like so

.main-content {
    overflow: unset;
}

Bootstrap sticky-top on sidebar column doesn't work

Position sticky will not work if any of the parent containers of the sticky element use overflow:hidden. Removing the overflow-hidden class from the container allows the sticky-top to work.

<div class="container min-vh-100">
    <nav class="navbar navbar-light navbar-expand">
        ..
    </nav>
    <div class="row">
        <div class="col-sm-8 content pt-4">
            ...
        </div>
        <div class="col-sm-4">
            <div class="menu sticky-top p-3 bg-light">
                <h5 class="text-primary">Sticky menu</h5>
                <div class="nav flex-column">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/9Nf6pOa7TN

---

Related Topics