un-fixing the position of the navbar in mobile view on Bootstrap with CSS and jQuery

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;
      }
    }

Tooltips and Popovers not working on Bootstrap

For a while I couldn’t make Bootstrap tooltips and popovers work. I had all the necessary js and css files, with the right js code. Been googling the issue and found this ticket: Tooltips custom selectors does not seem to work.

I’m not using custom selectors, but for some reason I just couldn’t make the default code work. So I followed the suggestions on the git thread. I changed [data-toggle=] with [data-tip=] and [data-pop=] and added a bit of .js:

$('[data-tip]').tooltip();
$('[data-pop]').popover();

Finally! That seemed to solve it!

bootstrap: two toggle buttons on the nav bar

Problem: Both menus on the mobile version collapses when the buttons are pressed. You only want one menu to unfold at a time. 

Found a fix here: http://jsfiddle.net/gNUEx/

Modified the code a bit:

  var navbar = $('.navbar');

  navbar.on('click', '[data-toggle="collapse"]', function(event){
   var $target = $($(this).data('target')); 
    if(!$target.hasClass('in'))
      $('.container .in').removeClass('in').height(0);    
    })