How can I get Twitter Bootstraps mobile navbar to overlay the content on the page instead of pushing it down?

Question

I'm using Twitter Bootstrap and would like to modify the mobile navbar so that when it is expanded the dropdown menu overlays the content on the page instead of pushing it down. I know I will probably need to make the menu containing <div> positioned absolutely, increase it's z-index, and position the outer <div> relatively, but I can't seem to get it to work.

Any suggestions as to how I might do this?

Here's a JSFiddle I'm starting from.

Answer 1

If you add a class like navbar-absolute to your navbar:

<div class="navbar navbar-fixed-top navbar-absolute">...</div>

, and a couple of CSS rules:

@media (max-width: 979px) {
  .navbar-fixed-top.navbar-absolute {
    position: absolute;
    margin: 0;
  }
}

.navbar-absolute + div {
    margin-top: 68px;
}

​It should get you started.

JSFiddle

Answer 2

it is simple just give "navbar-fixed-top" it will automaticaly overlay all the other contents

<nav class="navbar navbar-default navbar-fixed-top">