9

In bootstrap documentation they're able to "trap" a .navbar-fixed-top inside their .bs-docs-example div:

<div class="bs-docs-example bs-navbar-top-example">
    <div class="navbar navbar-fixed-top" style="position: absolute;">
        <div class="navbar-inner">
        [...]

But if I do the same in my test page the navbar "escapes" the div and get fixed in the top of the body, not the top of the div. How it's the trick achieved?

madth3
  • 7,275
  • 12
  • 50
  • 74
einundswanzig
  • 314
  • 1
  • 3
  • 15
  • is it the behaviour of the the left sidebar navbar on http://twitter.github.com/bootstrap/components.html#navbar that you are wondering about? – David Taiaroa Feb 07 '13 at 12:03
  • Nop is the example under the title "Fixed to top" (and "Fixed to bottom") on the right. They all have the tag "Example" on them. – einundswanzig Feb 07 '13 at 16:01

2 Answers2

12

Ok figured it out. The parent element container must have position: relative, and navbar must have position: absolute, that way if you attach either .navbar-fixed-top or .navbar-fixed-bottom it will get fixed relative to the parent element and NOT relative to the entire page. Yeah!

einundswanzig
  • 314
  • 1
  • 3
  • 15
  • 2
    This worked for me, except that my div has overflow on it and the navbar does not scroll with it. Did you contend with this? – ScubaSteve Aug 04 '14 at 12:50
1
<div class="container-fluid">
    <div class="container">
        <nav class="navbar">...</nav>
    </div>
</div>

That works with built-in Bootstrap's CSS.

json4rest
  • 21
  • 1