Fixed multi navigation container in Bootstrap?

Question

I'm a Bootstrap/css newbie so I apologize if this has been discussed before... I have been looking at various top navigation possibilities and have been using the "navbar-fixed-top" to test with Bootstrap's navbar presets.

My question is this: Is it possible to apply a "fixed" tag on a container that could possibly hold multiple items (logo and multiple navigation menu rows)?

Take this site for example: http://www.stonehill.edu Is it possible to take the top area of the site (the purple and white rows) and make them both fixed at the top of the screen, but they would remain responsive and size down to show only the logo at the top of the screen on xs size with the other navigation items shown as split button pulldowns below the logo (or simply nested in the burger menu)?

Is this a javascript/jquery action or could it be handled with css?

Thanks for any advice/insight!

Answer 1

This is only css. Try next thing. Build your sections like this:

<div class="nav">
...Navigation
</div>
<div class="content">
Rest of website
</div>

Now to apply that kind of behavior you need to fix div class="nav" to the top, and using margin to offset div class="content" from the top. This css will help you for that:

nav{
    position: fixed;
    top: 0;
    height: 100px; /*Put any height that you need here, and use that value for margin-top*/
}
content{
    margin-top: 100px;/*Equal to nav height*/
}

You don't need to assign height to nav let him expand with his content and take that value for margin-top .