Make bootstrap static bootstrap boot contents as fixed-navbar

Question

Using bootstrap 3. I have a fullscreen hero / insert section that has a background image.

WHAT I WANT :

• Static navbar, which overlays this section of the hero so that the background pattern of the section of the hero is displayed on the background of the navigation bar (for example, if I used "navbar-fixed-top" instead of "navbar-static-top",).

I want this to look (navbar-fixed-top style):

2. When the navigation bar collapses in mobile mode, the hamburger icon shows navigation links without clicking on the hero section.

WHAT HAPPENS :

• Using a “static” stack in the navigation bar in front of the hero section instead of overlaying
• By clicking on the hamburger icon, pushing out the hero section instead of overlaying it

Any idea how I could accomplish this without giving the hero section a negative margin?

My HTML:

<nav class="navbar navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-main-collapse"> <i class="fa fa-bars"></i> </button> <div class="navbar-brand" href="#page-top"> <img src="http://placehold.it/200x80" alt=" Logo" width="100"> </div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="navbar-main-collapse" class="collapse navbar-collapse navbar-right"> <ul class="nav navbar-nav"> <li class="active"><a href="..." target="_blank"><i class="fa fa-folder-open"></i> Link 1</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <section id="hero" class="full-screen-section"> <div class="cell-mid"> <div class="section-body"> <div class="container"> <div class="row"> <div class="col-md-2 col-md-offset-1 text-right"> <img src="http://placehold.it/300x120" id="faceOne" class="img-max hidden-xs hidden-sm"> </div> <div class="col-md-6 text-left"> <h1 class="brand-heading">EXAMPLE HEADING</h1> </div> <div class="col-md-2 text-left"> <img src="http://placehold.it/300x120" id="faceTwo" class="img-max hidden-xs hidden-sm"> </div> </div> </div> </div> </div> </section> 

My CSS:

 /* --------------- Nav --------------- */ .navbar { padding: 1em 0; margin-bottom: 0; border: none; text-transform: uppercase; background-color: transparent; background-image: none; } .navbar a { color:#fff; } /* --------------- Hero --------------- */ #hero { display: table; width: 100%; height: 100%; padding: 200px 0 50px 0; text-align: center; color: #fff; background: linear-gradient( rgba(248, 153, 153, 0.68), rgba(248, 153, 153, 0.68)), url('bg-science.png'); -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.5); } 

EDIT : Solution found thanks to @airbean. Just used the navbar-fixed-top class and added "position: absolute" in the navbar class.

Answer 1

@Aibrean helped. I used the navbar-fixed-top class and added "position: absolute" in the navbar class.

Answer 2

I know this is an old thread, but I had the same problem. I positioned the navigator absolutely, the links to the right of the navigation bar were located to the left.