CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Brain Bytes
Brain Bytes

Reputation: 142

Navbar and image showing line in between

I am trying to make it so the image is right behind the navbar, where the navbar is on top of the image, although the image must start from the top of the page just like the nav bar, and I don't know why it's showing this white line in between them.

website

This is an angular 6 website (not that it really matters in this case), I am using bootstrap. (I know this is not very angularish to do putting all this code in one style sheet, I am just fuzzing with it so then I can refactor).

I tried to fuzz with positioning and z-index and margin, but nothing works.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Angular Bootstrap Demo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- Nav bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarColor02"
        aria-controls="navbarColor02"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarColor02">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"
              >Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input
            class="form-control mr-sm-2"
            type="text"
            placeholder="Search"
          />
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">
            Search
          </button>
        </form>
      </div>
    </nav>
    <!--  -->

    <!-- main app root -->
    <app-root></app-root>
    <!--  -->
    <!-- Dependencies -->
    <script
      src="https://code.jquery.com/jquery-3.1.1.min.js"
      integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
      integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"
    ></script>
    <!--  -->
  </body>
</html>

And the stylesheet:

.jumbotron {
  color: #fff;
  height: 500px;
}

html {
  background-image: url("../assets/images/BBLogo.png");
}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

#front-page-links {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.logo {
  width: 100%;
  height: 100vh;
  background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
  background-size: cover;
}

/* Navbar */

@font-face {
  font-family: circuitBored;
  src: url(../assets/fonts/CircuitBoredNF.ttf);
}

@font-face {
  font-family: computerFont;
  src: url(../assets/fonts/jura.demibold.ttf);
}

.navbar.navbar-inverse {
  margin-bottom: 0;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 20px;
  margin-bottom: 0;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
}

nav ul li {
  display: inline-block;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 40px;
}

nav ul li a {
  text-decoration: none;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  font-family: computerFont;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu {
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
}

.menu ul li a:hover {
  background-color: #35701c;
}

.menu li ul {
  display: none;
  position: absolute;
}

.menu li:hover ul {
  display: grid;
  top: 55px;
}

.submenuD li {
  position: relative;
  text-align: left;
  z-index: 1;
}

.copyright {
  font-family: "computerFont";
  font-weight: lighter;
  text-align: center;
}

@media (max-width: 950px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }

  nav ul {
    max-height: 0px;
    background: #000;
  }

  nav.black ul {
    background: #000;
  }

  .showing {
    max-height: 34em;
  }

  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }

  .menu-icon {
    display: block;
  }
}

Upvotes: 2

Views: 521

Answers (2)

Nick
Nick

Reputation: 1422

There's a few problems with your code. First, you are importing Bootstrap3 in your link tag and your script tags, but you are using Bootstrap4 syntax. This is causing very little of your CSS to actually render properly.

Bootstrap3 was known to have issues with margin-collapsing, which you can read more about at MDN or CSS-Tricks. For the most part, Bootstrap4 solved most of these issues. I've changed your dependencies to the Bootstrap4 dependencies and added an orange div to show you how it looks without the collapsing margins.

.jumbotron {
  color: #fff;
  height: 500px;
}

html {
  background-image: url("../assets/images/BBLogo.png");
}

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

#front-page-links {
  margin: auto;
  width: 50%;
  padding: 10px;
}

.logo {
  width: 100%;
  height: 100vh;
  background: url(../assets/images/BBLogo.png) no-repeat 50% 50%;
  background-size: cover;
}


/* Navbar */

@font-face {
  font-family: circuitBored;
  src: url(../assets/fonts/CircuitBoredNF.ttf);
}

@font-face {
  font-family: computerFont;
  src: url(../assets/fonts/jura.demibold.ttf);
}

.navbar.navbar-inverse {
  margin-bottom: 0;
}

nav {
  position: fixed;
  width: 100%;
  line-height: 20px;
  margin-bottom: 0;
}

nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}

nav.black ul {
  background: #000;
  font-family: computerFont !important;
  font-size: 16px;
  font-weight: bold;
}

nav ul li {
  display: inline-block;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  padding: 16px 40px;
}

nav ul li a {
  text-decoration: none;
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #000;
  text-align: right;
  box-sizing: border-box;
  font-family: computerFont;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}

.menu {
  font-family: computerFont;
  font-size: 16px;
  font-weight: bold;
}

.menu ul li a:hover {
  background-color: #35701c;
}

.menu li ul {
  display: none;
  position: absolute;
}

.menu li:hover ul {
  display: grid;
  top: 55px;
}

.submenuD li {
  position: relative;
  text-align: left;
  z-index: 1;
}

.copyright {
  font-family: "computerFont";
  font-weight: lighter;
  text-align: center;
}

@media (max-width: 950px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }
  nav ul {
    max-height: 0px;
    background: #000;
  }
  nav.black ul {
    background: #000;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Angular Bootstrap Demo</title>
  <base href="/" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>

<body>
  <!-- Nav bar -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

    <div class="collapse navbar-collapse" id="navbarColor02">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" />
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">
            Search
          </button>
      </form>
    </div>
  </nav>
  <div style="background-color: orange; width: 100%; height: 500px;">
  </div>
  <!--  -->
  <!-- Dependencies -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <!--  -->
</body>

</html>

Upvotes: 2

codeuix
codeuix

Reputation: 1406

Remover margin-bottom:0px;

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 0px;
    border: 1px solid transparent;
}

Upvotes: 0

Related Questions