Bootstrap twitter fixed top smaller navigation menu

Question

Is this even possible via Twitter Bootstrap http://www.usatoday.com/opinion/

When you scroll down, only the menu portion should remain affixed in the top ? If anyone has handy jsfiddle version, it would be really nice.

Answer 1

You can get it working by taking the navbar and using the affix plugin. I have a (very rough) working example here: http://bootply.com/87472. The important bits are in the CSS:

header {            //this is whatever is sitting above the navbar.
   height:50px;     //this can be set to anything, just make it match
                    //the data-offset-top in the HTML (see below)
}    
.affix {
   width:100%;      //makes sure the "affixed" navbar stretches the full width
   top:0;           //makes it stick to the top when it gets there.
}
.affix + p {        //this is whatever is sitting below the navbar
   margin-top:70px; //set to the total height of your navbar
}

The bit in the HTML you need:

<div class="navbar navbar-default" data-spy="affix" data-offset-top="50">

As mentioned above, data-offset-top should match the total height of whatever element is sitting above your navbar.

As for the fancy effects, I would suggest you check out css transitions to make that magic happen.