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?
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!
<div class="container-fluid">
<div class="container">
<nav class="navbar">...</nav>
</div>
</div>
That works with built-in Bootstrap's CSS.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With