Bootstrap4 sticky-top (sticky navbar) not working properly

Question

I have made a navbar in my html page and added the Bootstrap 4 class sticky-top to it.

The problem is that, it sticks to the top till half of the screen is scrolled, but then the sticky property doesn't work and the navbar goes upward as the page is scrolled.

Why is it happening that it works for limited margin and then suddenly stops working?

I tried to use navbar-fixed-top class, also I tried position:sticky; top:0; width:100% position:sticky; top:0; width:100% position:sticky; top:0; width:100% , but in vain.

My Html for navbar :

<nav class="navbar navbar-expand-lg navigation navbar-fixed-top" style="position:sticky; top: 0; width:100%;" id="bootnavbar">
      <div class="container">
            <a class="navbar-brand" href="index.php"><i class="fas fa-home"></i></a>
            <button class="navbar-toggler  ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="font-size:0.85em;">
                  <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">

                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    About Us
                              </a>
                              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="about.php">About</a></li>
                                    <div class="dropdown-divider"></div>
                                    <li><a class="dropdown-item" href="boac.php">Board of Advisory Comittee</a></li>
                                    <li><a class="dropdown-item" href="bos.php">Board of Studies</a></li>
                                    <div class="dropdown-divider"></div>
                                    <li><a class="dropdown-item" href="admission.php">Admission</a></li>
                                    <li class="nav-item dropdown">
                                          <a class="dropdown-item dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Academic
                                          </a>
                                          <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
                                                <li><a class="dropdown-item disabled" href="faculty.php">Faculty</a></li>
                                                <li><a class="dropdown-item" href="activities.php">Activities</a></li>
                                          </ul>
                                    </li>
                                    <li><a class="dropdown-item" href="facilities.php">Facilities</a></li>
                              </ul>
                        </li>

                        <li class="nav-item dropdown">
                              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Courses
                              </a>
                              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li><a class="dropdown-item" href="regular_courses.php">Regular Courses</a></li>
                                    <li><a class="dropdown-item" href="short_term_courses.php">Short Term Courses</a></li>
                              </ul>
                        </li>

                        <li class="nav-item">
                              <a class="nav-link" href="gallery.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Gallery
                              </a>
                        </li>

                        <li class="nav-item">
                              <a class="nav-link" href="placements.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Training & Placements
                              </a>
                        </li>
                        <li class="nav-item">
                              <a class="nav-link" href="alumni.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Alumni
                              </a>
                        </li>

                        <li class="nav-item">
                              <a class="nav-link" href="feedback.php" role="button" aria-haspopup="true" aria-expanded="false">
                                    Feedback
                              </a>
                        </li>

                  </ul>
            </div>
      </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootnavbar.js"></script>
<script>
      $(function() {
            $('#bootnavbar').bootnavbar();
      })
</script>

My CSS for navbar :

.navigation {
    background: #020031;
    padding: 0px 23px;
    font-size: 17px;
    z-index: 500;
    box-shadow: 0px 10px 15px -9px;
}

.navbar-brand {
    color: #fff;
}

.navbar-brand:hover {
    color: #fff;
}

.navigation .nav-item .nav-link {
    color: #fff;
    margin-right: 10px;
    padding: 16px;
    text-transform: capitalize;
    font-weight: 500;
}

.navigation li a:hover {
    background: #f6783a;
}

.custom-toggler.navbar-toggler {
    border-color: rgb(255, 255, 255);
}

.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-switch {
    display: none;
}

.nav-section {
    background: #020031;
}

.nav-section .nav-right {
    float: right;
    padding-top: 23px;
}

.nav-section .nav-right a {
    color: #fff;
    margin-left: 30px;
    font-size: 16px;
}

.main-menu {
    list-style: none;
}

.main-menu li {
    display: inline;
}

.main-menu li a {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 25px 20px;
    margin-right: -5px;
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.main-menu li a:hover {
    background: #f6783a;
}

.main-menu li.active a {
    background: #f6783a;
}

bootnavbar.css

.dropdown-menu {
    margin-top: 0;
}
.dropdown-menu .dropdown-toggle::after {
    vertical-align: middle;
    border-left: 4px solid;
    border-bottom: 4px solid transparent;
    border-top: 4px solid transparent;
}
.dropdown-menu .dropdown .dropdown-menu {
    left: 100%;
    top: 0%;
    margin:0 20px;
    border-width: 0;
}

.dropdown-menu > li a:hover,
.dropdown-menu > li.show {
    background: #007bff;
    color: white;
}
.dropdown-menu > li.show > a{
    color: white;
}

@media (min-width: 768px) {
    .dropdown-menu .dropdown .dropdown-menu {
        margin:0;
        border-width: 1px;
    }
}

bootnavbar.js

(function($) {
    var defaults={
        sm : 540,
        md : 720,
        lg : 960,
        xl : 1140,
        navbar_expand: 'lg'
    };
    $.fn.bootnavbar = function() {

        var screen_width = $(document).width();

        if(screen_width >= defaults.lg){
            $(this).find('.dropdown').hover(function() {
                $(this).addClass('show');
                $(this).find('.dropdown-menu').first().addClass('show').addClass('animated fadeIn').one('animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd', function () {
                    $(this).removeClass('animated fadeIn');
                });
            }, function() {
                $(this).removeClass('show');
                $(this).find('.dropdown-menu').first().removeClass('show');
            });
        }

        $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
          if (!$(this).next().hasClass('show')) {
            $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
          }
          var $subMenu = $(this).next(".dropdown-menu");
          $subMenu.toggleClass('show');

          $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
            $('.dropdown-submenu .show').removeClass("show");
          });

          return false;
        });
    };
})(jQuery);

Answer 1

I just seeing this question its late but might be helpfull for someone else. Using two container-fluid or container causing this problem.

Example :

<div class="container-fluid">
   etc...
</div>

Your navbar will work untill here then stop working.

<main class="container-fluid" role="main">
   etc...
</main>

So, your html codes should be like this :

<div class="container-fluid">
  etc...
    <main role="main">
       etc...
    </main>
</div>

Use only one container in your site, and all your codes in there.

Answer 2

Changing navbar-fixed-top in fixed-top may be the fix here.

<nav class="navbar navbar-expand-lg navigation  fixed-top">
  <div class="container">
    ....
  </div>
</nav>

In most cases try to avoid margin-left and margin-right. Border-sizing will not include margin and therefore a design may breakdown. Use padding if possible. Margin-top and margin-bottom is normally no problem in responsive design.

Using Javascript for hover doesn't work when rezing the browser. Try using

/* submenu open on hover, add css animation if you like */
@media (min-width: 768px)  {
  nav.navigation ul > li:hover > .dropdown-menu  {
    display: block;
  }
  nav.navigation ul > li:not(:hover) > .dropdown-menu  {
    display: none;
  }
}

Answer 3

Hell Yeah!!

I solved the problem with different approach .

Since, I had a header above the navbar in my website, I can't do position: fixed , because this would bring the navbar on top of header when that page is visited and when top:0 .

Solution :

I measured the height to which the sticky-top of Bootstrap worked and then just before that height (from top), I applied a media query which changed position: sticky to position: fixed and then navbar came at top when desired.

This was desirable as the header part is gone now.

I know this is just a quick fix, but it works perfectly :)