Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap fixed navbar inside div

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?

like image 866
einundswanzig Avatar asked Feb 07 '13 03:02

einundswanzig


2 Answers

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!

like image 112
einundswanzig Avatar answered Sep 17 '22 00:09

einundswanzig


<div class="container-fluid">
    <div class="container">
        <nav class="navbar">...</nav>
    </div>
</div>

That works with built-in Bootstrap's CSS.

like image 24
json4rest Avatar answered Sep 18 '22 00:09

json4rest