Creating a sticky navbar using twitter bootstrap?

css, jquery, twitter-bootstrap

Solution

is this what you are looking for?

<div class="navbar navbar-fixed-top">

Problem

I am trying to introduce a navbar that, when no longer in view, then adopts fixed header positioning. I started by using this thread: Replicating Bootstraps main nav and subnav. Since then, I have arrived at: http://jsfiddle.net/yTqSc/2/. The problem: The anchor links will overshoot their target (therein hiding the destination heading) whenever the navbar is in its original position, but not once it is fixed. I can fix the overshoot (I referred to http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/), but then I end up with an excessive gap using the links when the navbar is fixed. Can anyone advise how to obtain consistent results regardless of whether the navbar is fixed or not? Thanks.

Original source

Related problems