Bootstrap carousel scrolls over my fixed top nav

Question

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;
   }
}

Answer 1

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;
  }
}

Answer 2

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 :)

Answer 3

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>