Get navbar to overlap header?

Question

I am using bootstrap. Currently there is a gap between my navbar and my header image. I want the navbar to go over top of the image and I want the image to begin at the top of the page. How do I get rid of the white gap?

Here is my HTML for navbar and image:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <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" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Header html:

    <figure class="intro">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/diver2.jpg" alt="" />
      <figcaption class="caption">
        <h1>Invasion</h1>
      </figcaption>
      <span class="overlay">
    <svg version="1.1" id="circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 500 250" enable-background="new 0 0 500 250" xml:space="preserve" PreserveAspectRatio="none">
    <path fill="#FFFFFF" d="M250,246.5c-97.85,0-186.344-40.044-250-104.633V250h500V141.867C436.344,206.456,347.85,246.5,250,246.5z"
      />
    </svg>
      </span>

here is the css:

    *, *:before, *:after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      font-family: 'Roboto', sans-serif;
    }

    .intro {
      position: relative;
      height: auto;
      transform: translateZ(0);
      // background-image: linear-gradient(35deg, $blue, $yellow);

      img {
        position: relative;
        display: block;

        width: 100%;

        height: auto;
        z-index: 1;
        mix-blend-mode: multiply;
      }
    }

    .intro .caption {
      position: absolute;
      bottom: 25%;
      left: 0;
      width: 100%;
      text-align: center;
      z-index: 3;
      color: white;

      h1 {
        display: inline-block;
        width: 70%;
        font-size: 6vw;
        font-weight: 100;
      }
    }

    .intro .overlay {
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 100%;

      z-index: 2;
      pointer-events: none;

      svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

I have no custom css as of yet on my navbar. I tried setting the image to top: 0, or even -10% but it won't move. Thank you!

Answer 1

You can move the header up to the navbar by modifying .intro to:

.into {
      position: relative;
      height: auto;
      transform: translateZ(0);
      top: -20px; /* .navbar has margin-bottom: 20px; */
}