CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapsass
Harry Zumwalt
Harry Zumwalt

Reputation: 132

Bootstrap carousel scrolls over my fixed top nav

I have a fixed top navigation for a personal site I'm doing. I added a fairly large bootstrap carousel beneath this, but when i scroll down the carousel scrolls over the header hiding the nav. I've put a link to a version of the site hosted on github pages and included some relevant code snippets below along with a link to the repository. Thank you in advance for any help you can provide.

The Site

The Repository

Index.html

<header>
  <div class="header">
    <div class="wrapper">
      <span class="jamie">JT</span>
      <div class="nav-wrapper">
        <nav class="nav">
          <a href="#">Home</a>
          <a href="#">Bio</a>
          <a href="#">Contact</a>
          <img src="" alt="twit">
          <img src="" alt="insta">
          <img src="" alt="face">
          <img src="" alt="tube">
          <img src="" alt="spot">
        </nav>
      </div>
    </div>
  </div>
</header>
<div class="car-wrapper  banner">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="images/banner.png" alt="Los Angeles">
      </div>

      <div class="item">
        <img src="images/filler.png" alt="Chicago">
      </div>

      <div class="item">
        <img src="images/filler2.png" alt="New York">
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

Main.scss

header {
  position: fixed;
  top:0px;
  margin:auto;
  z-index: 99999;
  width:100%;
}

.header {
  height: 80px;
  .wrapper {
    padding-top: 30px;
  }
  a {
    font-family: 'Work Sans', sans-serif;
  }
}

.nav-wrapper {
  float: right;
}
.nav {
  a {
    color: $white;
    font-size: 16pt;
    letter-spacing: -.05em;
    margin-right: 3em;
    padding-bottom: 20px;
    display: inline-block;
  }
}
.banner {
  margin-top: 80px;
}
.carousel-inner {
   height: 650px;
   .item, img{
       height: 100% !important;
       width:  100% !important;
   }
}

Upvotes: 4

Views: 1886

Answers (3)

Nirav Joshi
Nirav Joshi

Reputation: 2960

You need to just background color in your header class

Like this 

.header {
    height: 80px;
    background: #000;
}

Other things are working fine.

Hope this will helps you :)

Upvotes: 1

anshuraj
anshuraj

Reputation: 342

To have a fixed navbar on the top use bootstrap's navbar

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Upvotes: 0

dee
dee

Reputation: 121

I think your example is working fine. Just that your nav itself has no background color and the links are white, blending in with the carousel.

The black you see is the color of the body itself, which is why it goes away when you scroll.

Try adding a color on this class

.header {
  height: 80px;
  background: blue; /* test */
  .wrapper {
    padding-top: 30px;
  }
  a {
    font-family: 'Work Sans', sans-serif;
  }
}

Upvotes: 2

Related Questions