Bootstrap - "floating" Navbar That Stays On-Screen?

On an app I am building now, I would like to have two navigation bars, I’ll call them the “main nav” and “secondary nav”. I will be using the BootMenu widget from the bootstrap extension.

Main nav will be fixed, full-width at the top of the page. Secondary nav will be page-width, just below the header div.

I would like the position of the secondary nav to be static until the user scrolls down. When the user scrolls to the point where the main nav "hits" the secondary nav as it moves down the page, the secondary nav should also begin moving down to stay on-page, resulting in the main nav being stacked on top of the secondary nav until the user scrolls up far enough to bring the header back into view.

For example, it would behave similar to this:

What is the best "Yii way" to accomplish this using the Bootstrap extension? Thanks.

Almost have it working.

When I scroll down, the navbar moves the way I’d like it do, except it changes size. For some reason it shrinks width when the CSS class “.sticky” is added and it switches from “relative” to “fixed”. So, at this point it seems like a CSS issue. Any tips for working this out?

Here is what I did:

  1. Put this code in /js/floating-nav.js

function sticky_relocate() {

	var window_top = $(window).scrollTop();

	var div_top = $('#sticky-anchor').offset().top;

	if (window_top > div_top)





$(function() {




  1. Added this views/layouts/main.php



        Yii::app()->baseUrl . '/js/floating-nav.js',




  1. Here is the navbar code, also in views/layouts/main.php:

<div class="row-fluid" id="main-wrapper">

  <div class="span8 offset2">




    <div class="row-fuid">

        <div id="sticky-anchor"></div>

        <div id="secondary-nav">


        $this->widget('bootstrap.widgets.TbNavbar', array(

           'type' => 'inverse',

           'fluid' => false,

           'fixed' => false,













  1. Lastly, here is the relevant CSS:

.sticky {

    position: fixed;

    top: 0;