Bootstrap Navbar overtop Carousel

Question

Having a slight problem with the positioning of my navbar. I have my navbar the way I would like (detached from the top slightly like in this example: http://getbootstrap.com/examples/carousel/) but the pictures in my carousel end below the navbar.

I would like for the pictures in my carousel to extend all the way to the top of the page and have the navbar overlapping the upper portion of the carousel (like in the example above). I've played around with the padding but the highest I can get the carousel images to extend to are the bottom of the navbar. I've attached the code snippets for the navbar, carousel and carousel css below. Any help would be appreciate, thanks in advance

Code for Navbar:

<div class="container">
  <div class="navbar navbar-inverse" role="navigation">  <!navbar-inverse is black, navbar-default is grey>


    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand">Derby Days 2014</a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Donate</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Events <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">Penny Wars</a></li>
            <li><a href="#">Wonderful Wednesday</a></li>
            <li><a href="#">Lip Sync</a></li>
            <li><a href="#">Concert</a></li>
          </ul>
        </li>
        <li><a href="#">FAQ</a></li>
      </ul>
    </div><!--/.nav-collapse -->
   </div>
</div>

Code for Carousel:

CSS code for carousel:

.carousel {position: relative;}

.carousel-inner {position: relative; width: 100%; overflow: hidden;}

Solution 1

I believe this is what you are trying to achieve?

Js Fiddle

.bannerContainer {
    position:relative;     
}
.carousel {
    position:absolute;
    top:0;    
}
.navbar {
    position:absolute;
    top:30px;
    z-index:10;
    background:#fff;
    width:100%;
}

You want to wrap absolute positioned divs (nav and carousel) into a div that is relative.

Solution 2

You can overright the existing bootstrap css with this,you can use position:fixed or position:absolute

.navbar{
      position:absolute;
      width:100%;
      z-index:10;
      max-width:100%;
}

Here is working codepen example

Solution 3

//To get navbar to sit on top of the carousel.

.navbar {
position:absolute
}

//To center the image and add a bit of padding above it to compensate for the navbar.

.carousel-inner > .item > img {
    margin: 0 auto;
    padding-top: 50px;
}

Worked for me at the very least, so here's hoping it helps you (and others). Cheers.