How do i remove this unwanted gap between my navabar and featured image?

Question

I am creating a website with bootstrap, and I encountered a problem when I created a featured image with a parallax effect. It seems that something is creating a space between the navigation bar (Bootstrap) and the featured image.

.parallax {
background-image: url("../images/aboutHeader.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.parallax h2 {
color: white;
font-size: 4em;
text-align: center;
padding-top: 100px;
}


<!-- NAVBAR
    ================================================== -->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="images/headerWhite.png" alt="Bird's Aerial Imaging LC" style="height:100%">
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-right" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#">Home</a></li>
          <li class="active"><a href="#">About</a></li>
          <li><a href="#">Gallery</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- FEATURED IMAGE =============================================================== -->
  <section style="height:250px;">
    <div class="parallax">
      <h2>About Us</h2>
    </div>
  </section>

score 0 · Answer 1 · answered Jul 29 '17 at 04:22

You can add position:absolute; top:0; to your section tag. That will definitely remove the space...

It could also be because of default margin or padding around the section. Try to add margin:0; padding:0; to that

score 0 · Accepted Answer · answered Jul 29 '17 at 04:29

What I understood from you that you mean the white vertical space between the parallax div and the navbar and my answer will depend on that, if your problem is different please let me know.

Your solution is all about removing:

1) The margin property from the "h2":

.parallax h2 {
  margin-top: 0;
}

2) The padding property from the "navbar":

.navbar {
  padding-bottom: 0;
}

Hope it works with you!

How do i remove this unwanted gap between my navabar and featured image?

2 Answers2