Revision 264 is a pre-publication revision. (Viewing current revision instead.)

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? [js] // 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') } }[/js]

Revisions

  • September 21, 2012 @ 14:59:24 [Current Revision] by PeterLugg
  • September 21, 2012 @ 14:58:58 by PeterLugg
  • September 21, 2012 @ 14:57:02 by PeterLugg

Revision Differences

September 21, 2012 @ 14:57:02Current Revision
Content
 Added: Taken from GitHub <a href="https:/ /github.com/twitter/bootstrap/ issues/1189" target="_blank">here</a>.
 Added: 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.
 Added: Make sure that the link to the docs.css file is in the <code>&lt; head&gt;</code> of your document like this. The file that I'm using the subnav in is in the root of my site hence the path.
 Added: <pre><code>&lt;link href="../docs/ assets/css/docs.css" rel="stylesheet"&gt; </code></pre>
 Added: Make sure the <code>&lt; body&gt;</code> looks like this
 Added: <pre><code>&lt;body data-spy="scroll" data-target=".subnav" data-offset="50"&gt; </code></pre>
 Added: data-spy is for scrollspy but I leave it in as it's sweet.
 Added: 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.
 Added: <pre><code>&lt;script src="/docs/assets/ js/application.js" &gt;&lt;/script&gt; </code></pre>
 Added: 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
 Added: Hope that helps.
 Added: Then some smart alec came up with this Javascript.....whoi knows if it works?
 Added: [js] // fix sub nav on scroll
 Added: var $win = $(window)
 Added: , $nav = $('.subnav')
 Added: , navTop = $('.subnav').length &amp;&amp; $('.subnav').offset().top - 40
 Added: , isFixed = 0
 Added: processScroll()
 Added: $win.on('scroll', processScroll)
 Added: function processScroll() {
 Added: var i, scrollTop = $win.scrollTop()
 Added: if (scrollTop &gt;= navTop &amp;&amp; !isFixed) {
 Added: isFixed = 1
 Added: $nav.addClass( 'subnav-fixed')
 Added: } else if (scrollTop &lt;= navTop &amp;&amp; isFixed) {
 Added: isFixed = 0
 Added: $nav.removeClass( 'subnav-fixed')
Deleted: Added: }
 Added: }[/js]

Note: Spaces may be added to comparison text to allow better line wrapping.

No comments yet.

Leave a Reply