Bootstrap - fixed navbar with content above

Hi Liam,

I don't have any experience yet with bootstrap so I can't give you a full, compete answer here but I'll try to explain what's causing this and point you in the direction of the solution.

The amount that the content is jumping up is probably equal to the height of your nav. When your nav position is changed to 'fixed' it is removed from the document flow and your content is then jumping up to occupy the space vacated by the nav.

To counteract this I think you would need to add a top margin to your content that is equal to the height of your nav. You would want to add this at the moment the nav becomes fixed and also remove that extra top margin if the user scrolls back up and the nav becomes 'unfixed'.

Take a look at the "Events" section for "Affix" on this page: http://getbootstrap.com/javascript/#affix

I think you'll want to add event listeners for a couple of those events and then inside the event handlers is where you can add/remove that extra top margin to your content.

Hope this helps.

edit:

I decided to go ahead and try to figure this out. I forked your example. http://www.bootply.com/118900

Is that what you're trying to achieve?

If so, I added this code to your javascript:

$('#nav').on('affix.bs.affix', function () {
    var navHeight = $('.navbar').outerHeight(true);
    $('#nav + .container').css('margin-top', navHeight);
});

$('#nav').on('affix-top.bs.affix', function () {
    $('#nav + .container').css('margin-top', 0);
});