The floating navbar on responsive/mobile Bootstrap templates has a fixed position. But when the menu becomes longer, I needed to make it ‘relative’ in position so that the person can scroll down the items to see the other links.

jQuery

function mobile_header() {
     /* on mobile, opening the menu scrolls to top and removed the 
    'fixed' positioning so that if the menu is longer, 
    the user can scroll to see the menu items */

                $('.btn-navbar').click(function(){
                    $('html, body').animate({ scrollTop: 0 }, "slow");
                    if($('.btn-navbar').hasClass('open')){ 
                        $('.navbar').removeClass('mobile');
                        $(this).removeClass('open');
                    }
                    else {
                        $('.navbar').addClass('mobile');
                        $(this).addClass('open');
                    }
                });
}

LESS

 .navbar {
      position: fixed;
      top: 0;
      width: 100%;
      height: 60px;
      z-index: 99;

      &.mobile {
        position: absolute;
      }
    }