title: Why is this Hero Image covering the Fixed Nav Bar, with the Nav Bar reappearing after scroll-through?
body: <p>I am trying to build a customized theme for WordPress using HTML and CSS.  The issue I'm running into is that the Hero Image seems to always be above the fixed top nav bar - I've tried searching through similar posts but couldn't find any with this particular code set.  As you scroll down, you will see that the fixed nav disappears then reappears after the Hero Image; my initial inclination was something with the position (relative/absolute), but such changes didn't help.  Really appreciate any support - thank you!</p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code> &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;title&gt;Designs&lt;/title&gt;
      &lt;meta name="keywords" content="Designs" /&gt;
      &lt;meta name="description" content="Designs"&gt;
      &lt;meta name="copyright" content="Copyright Designs.  All rights reserved." /&gt;
      &lt;meta name="publisher" content="Designs" /&gt;
      &lt;meta name="author" content="Designs"&gt;
      &lt;!-- Stylesheets --&gt;
      &lt;link rel="stylesheet" href="stylesheet.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;!-- Web Font Pulls --&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i|Montserrat:400,700" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
      &lt;div class="topnav"&gt;
          &lt;a class="active" href="#home"&gt;Home&lt;/a&gt;
          &lt;a href="#about"&gt;About&lt;/a&gt;
          &lt;a href="#contact"&gt;Experience&lt;/a&gt;
          &lt;a href="#contact"&gt;Projects&lt;/a&gt;
          &lt;a href="#contact"&gt;Musings&lt;/a&gt;
          &lt;a href="#contact"&gt;Contact&lt;/a&gt;
        &lt;div class="search-container"&gt;
            &lt;form action="/action_page.php"&gt;
            &lt;input type="text" placeholder="Search..." name="search"&gt;
            &lt;button type="submit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;div class="hero-image"&gt;
            &lt;div class="hero-text"&gt;
              &lt;h1&gt;This is a hero heading&lt;/h1&gt;
     &lt;p&gt;Hero sub text&lt;/p&gt;
     &lt;button&gt;Button&lt;/button&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
      &lt;h1&gt;My First Heading&lt;/h1&gt;
      &lt;p&gt;My first paragraph.&lt;/p&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <blockquote>
    <p>CSS</p>
  </blockquote>
  
  <pre><code> body {
      background-color: powderblue;
  
   }
    h1 {
      color: blue;
    }
     p {
      color: red;
       }
  
   {box-sizing: border-box;}
  
   body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
        }
  
   .topnav {
      overflow: hidden;
      background-color: #e9e9e9;
      position: fixed;
      top: 0;
      width: 100%;
           }
  
   .topnav a {
      float: left;
      display: block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
             }
  
   .topnav a:hover {
      background-color: #ddd;
      color: black;
                }
  
   .topnav a.active {
       background-color: #2196F3;
       color: white;
                   }
  
   .topnav .search-container {
       float: right;
                  }
  
   .topnav input[type=text] {
       padding: 6px;
       margin-top: 8px;
       font-size: 17px;
       border: none;
             }
  
   .topnav .search-container button {
       float: right;
       padding: 6px 10px;
       margin-top: 8px;
       margin-right: 16px;
       background: #ddd;
       font-size: 17px;
       border: none;
       cursor: pointer;
                }
  
     .topnav .search-container button:hover {
          background: #ccc;
                   }
  
      @media screen and (max-width: 600px) {
        .topnav .search-container {
            float: none;
             }
            .topnav a, .topnav input[type=text], .topnav .search-container button                  
                          {
       float: none;
       display: block;
       text-align: left;
       width: 100%;
       margin: 0;
       padding: 14px;
           }
             .topnav input[type=text] {
             border: 1px solid #ccc;
                   }
                  }
  
  
   body, html {
      height: 100%;
            }
  
  
  
  body, html {
      height: 100%;
      margin: 0;
  }
  
  .hero-image {
    background-image: url("https://static.pexels.com/photos/440731/pexels-photo-440731.jpeg");
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }
  
  .hero-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: black;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
  }
  
  .hero-text button:hover {
    background-color: #555;
    color: white;
  }
  </code></pre>