Twitter Bootstrap Question posted in

Annoying Space Between Navbar and Title-Twitter bootstrap

I’ve got an annoying space between the navbar and an <h1> header, at the top of the page, that I can’t seem to get rid of. I’ve tried .navbar { margin-bottom: 0; } and section#title-bar { margin-top: 0; }. But, the gap doesn’t go away. I’m using bootstrap 4.

Here’s my code:

body {
  background: #FFF;
  padding-top: 4rem; }
  body .navbar {
    margin-bottom: 0px; }
  body .green-text {
    color: #1CAA98 !important; }
  body .jumbotron {
    background: url(../img/site_showcase_bg.jpg) no-repeat top center;
    color: #FFF;
    height: 500px;
    overflow: none; }
    body .jumbotron img.app-btn {
      width: 40%;
      margin-right: 30px;
      display: inline; }
    body .jumbotron h1 {
      margin-top: 60px; }
    body .jumbotron p {
      margin-bottom: 40px; }
    body .jumbotron img.showCase-img {
      max-width: 100%; }
  body section#middle {
    padding: 10px 0 40px 0; }
    body section#middle img.demo-1 {
      width: 100%;
      padding: 3px;
      border: 1px solid #CCC; }
    body section#middle img.demo-2 {
      width: 100%;
      padding: 3px;
      border: 1px solid #CCC; }
    body section#middle img.demo-3 {
      width: 100%;
      padding: 3px;
      border: 1px solid #CCC; }
  body section#feature {
    background: #1CAA98;
    color: #FFF;
    padding: 40px;
    overflow: auto; }
    body section#feature ul li {
      font-size: 22px;
      list-style: none; }
    body section#feature .big-logo {
      width: 100%; }
  body section#title-bar {
    height: 80px;
    background: #1CAA98;
    color: #FFF;
    padding: 0;
    margin: 0; }
  body footer {
    background: #333;
    color: #FFF;
    padding: 30px 0 20px 0; }
    body footer li {
      float: left;
      padding: 0 10px 0 10px;
      list-style: none; }
    body footer a {
      color: #FFF; }
    body footer p {
      float: right; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Adding Font Awesome icons to the app -->    
    <script src="https://use.fontawesome.com/7333e518d7.js"></script>

    <title>Gamma: About</title>

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/styles.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand green-text" href="#">Gamma</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <section id="title-bar">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <h1>About Gamma</h1>
            </div>
          </div>
        </div>
    </section>
  </body>
</html>

Maybe I’ve overlooked something. Any help is appreciated.

Tags:

2

Answers


  1. 0

    This is due to padding-top: 4em; on the body, You need to use 56px (height of the navbar) instead, like:

    body {
  padding-top: 56px; // Height of the navbar
}

    Have a look at the snippet below:

    body {
  background: #FFF;
  padding-top: 56px; }
  body .navbar {
    margin-bottom: 0px; }
  body .green-text {
    color: #1CAA98 !important; }
  body .jumbotron {
    background: url(../img/site_showcase_bg.jpg) no-repeat top center;
    color: #FFF;
    height: 500px;
    overflow: none; }
    body .jumbotron img.app-btn {
      width: 40%;
      margin-right: 30px;
      display: inline; }
    body .jumbotron h1 {
      margin-top: 60px; }
    body .jumbotron p {
      margin-bottom: 40px; }
    body .jumbotron img.showCase-img {
      max-width: 100%; }
  body section#middle {
    padding: 10px 0 40px 0; }
    body section#middle img.demo-1 {
      width: 100%;
      padding: 3px;
      border: 1px solid #CCC; }
    body section#middle img.demo-2 {
      width: 100%;
      padding: 3px;
      border: 1px solid #CCC; }
    body section#middle img.demo-3 {
      width: 100%;
      padding: 3px;
      border: 1px solid #CCC; }
  body section#feature {
    background: #1CAA98;
    color: #FFF;
    padding: 40px;
    overflow: auto; }
    body section#feature ul li {
      font-size: 22px;
      list-style: none; }
    body section#feature .big-logo {
      width: 100%; }
  body section#title-bar {
    height: 80px;
    background: #1CAA98;
    color: #FFF;
    padding: 0;
    margin: 0; }
  body footer {
    background: #333;
    color: #FFF;
    padding: 30px 0 20px 0; }
    body footer li {
      float: left;
      padding: 0 10px 0 10px;
      list-style: none; }
    body footer a {
      color: #FFF; }
    body footer p {
      float: right; }
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Adding Font Awesome icons to the app -->    
    <script src="https://use.fontawesome.com/7333e518d7.js"></script>

    <title>Gamma: About</title>

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="./css/styles.css" rel="stylesheet">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand green-text" href="#">Gamma</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="about.html">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </nav>

    <section id="title-bar">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <h1>About Gamma</h1>
            </div>
          </div>
        </div>
    </section>
  </body>
</html>

    Hope this helps!

    Login or Signup to reply.
  2. 0

    You need to remove the top margin from the h1 tag itself and the bottom margin from the navbar-nav ul list, which is there by default browser styles.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search