Bootstrap Navbar Disappears Using Leaflet

I am having some difficulty integrating leaflet with Bootstrap. I am using a script that creates a collapsible left navbar. When I interact with the leaflet map, the bootstrap navb

Solution 1:

It looks like every time the map gets focused the webpage is moving 78 pixels down. (You might be able to find where this is happening and fix it.)

However I just came up with something quick that would adjust your navbar so that it would show up at the top of the page every time.

$(document).ready(function(){
    var margin = 78;
    $('#map').on('mousedown',function(){
        $('#navBar').css('margin-top',margin+'px');
    });  
    $('#map').blur(function(){
        margin = margin+78;
    }); 
});

Note: I also added a ID to your nav bar.

<div class="navbar navbar-inverse"id="navBar">

Here is an example, seems to work pretty good for now, but might be worth your time later to figure out why the page is being moved down.

http://jsfiddle.net/6sSrE/15/