Add subnav component and behavior to Bootstrap

Taken from GitHub here.

I just spent an hour figuring this out so here’s how I did it. Please chip in if I’m doing something that is not necessary.

Make sure that the link to the docs.css file is in the <head> of your document like this. The file that I’m using the subnav in is in the root of my site hence the path.

<link href="../docs/assets/css/docs.css" rel="stylesheet">

Make sure the <body> looks like this

<body data-spy="scroll" data-target=".subnav" data-offset="50">

data-spy is for scrollspy but I leave it in as it’s sweet.

You will also need the following at the end of the document, but providing you are using one on the bootstrap templates you should be fine.

<script src="/docs/assets/js/application.js"></script>

And that’s it. It should work. The only problem with this approach is you get the squared background image and your logo moves to the right in the navbar but you can just comment that out in docs.css

Hope that helps.

Then some smart alec came up with this Javascript…..whoi knows if it works?

    // fix sub nav on scroll
    var $win = $(window)
      , $nav = $('.subnav')
      , navTop = $('.subnav').length && $('.subnav').offset().top - 40
      , isFixed = 0

    processScroll()

    $win.on('scroll', processScroll)

    function processScroll() {
      var i, scrollTop = $win.scrollTop()
      if (scrollTop >= navTop && !isFixed) {
        isFixed = 1
        $nav.addClass('subnav-fixed')
      } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
        $nav.removeClass('subnav-fixed')
      }
    }

Revisions

No comments yet.

Leave a Reply