H1 not display under navbar

HTML-CSS
1

I am trying to figure out why my code is not appearing when I run my file. My code is below, but it is lines 38 through 48 which are not displaying on screen. There should be an h1 that appears under the navbar.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <title>Bootstrap Theme</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <div class="container">
        <a  class="navbar-brand" href="index.html">LoopLab</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
          <span class="navbar-toggle-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a href="#explore-head-section" class="nav-link">Explore</a>
            </li>
            <li class="nav-item">
              <a href="#create-head-section" class="nav-link">Create</a>
            </li>
            <li class="nav-item">
              <a href="#share-head-section" class="nav-link">Share</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <header id="home-section">
      <div class="dark-overlay">
        <div class="home-inner container">
          <div class="row">
            <div class="col-lg-8 d-none d-lg-block">
              <h1 class="display-4">Build<strong>Soical Profiles</strong> and Gain Revenue <strong>Profits</strong></h1>
            </div>
          </div>
        </div>
      </div>
    </header>

<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script>
//get the current year for the copyright
$('#year').text(new Date().getFullYear())
</script>
  </body>
</html>

If anyone can see where I am making an error, Id appreciate it the help. Cheers

2

sorry, please refer to the code within the header tag

3

This is becasue navigation is fixed. So your header is the first element starts from top, and it placed under navigation.

either add some top space for header using css, or js(more accurate)

1 Like
4

Hi @dankhayutin! This is my first post here, so thanks!

I noticed you’re using Bootstrap v4.1.1. I checked the documentation and it looks like you’re using the class d-none on the container surrounding your <h1> tags. Try taking that off and let me know what happens!

Here’s the code:

<div class="col-lg-8 d-lg-block">
  <h1 class="display-4">Build<strong>Soical Profiles</strong> and Gain Revenue <strong>Profits</strong></h1>
</div>
1 Like
5

that fixed it!! thanks so much nisk

6

thanks for the info! how would you add js to fix this problem?

7

Glad to help! DM me anytime if you need help. ==> Profile

8

Grab the navigation height, and use it as top margin, or top padding for header.

For windows resize you may need to do the same thing if navigation may goes larger/smaller by different screen sizes.

9