Hero-text moves ABOVE the header

Hi,

When I scroll down the page of my pen below, I notice my hero-text “Home Relocation” moves ABOVE the header…

Here is my pen: https://codepen.io/turchan/full/WNxzQMe

Any ideas on how to fix this?

HTML

<div id="page-wrapper">

  <header class="top-header">
    
    <div class="logo">
      <p><a class="nav-link" href="https://cdpn.io/turchan/debug/gOMMmZo/DqkDdgxnnVKk"><strong>MOVERS</strong></a></p>
    </div>
    
    <nav id="nav-bar">
      <ul>
 
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/NWrxRrO/DqrDdgxnnEgr"><strong>ABOUT US</strong></a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/JjKJgWE/VJrxxOvnnwdr"><strong>SERVICES</strong></a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/ZEOJzqv/yPkJjKgJNmbk"><strong>LOCATIONS</strong></a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/zYBdOER/wQAPozejjPxr"><strong>CONTACT</strong></a></li>
        
      </ul>
    </nav>
  </header>
  
  
  
  <div class="hero-image">
   <div class="hero-text">
     <h1 id="landing-title"><strong><span class="in-love">HOME RELOCATION</strong></span></h1>
  
   </div>
  </div>
  

<div>
  <h2 class="landing">We are a team of dedicated movers ensuring you an affordable hassle free home relocation</h2>
    <p class="landing-desc">We are a one-stop-shop for all your moving/ hauling or relocation needs. Your satisfaction is guaranteed.</p>
  </div>
  
  <div class="from-group">
      <button
              type="submit"
              id="submit"
              class="submit-button"><strong>CALL OR TEXT US NOW!</strong></button>
    </div>

  
<div class="hero-image-2">
   <div class="hero-text-2">
     <div class="container-address">
       
       
<div class="address">KENUGS MOVERS<br>
       
MINNEAPOLIS METRO AREA<br>

MONDAY- SUNDAY EVERY DAY FROM 7AM TO 11PM<br>

</div>
       
<div class="email-phone">

(832) 417-9305 Emmanuel<br>
       
(832) 417-9065 Joyce<br>
       

<div class="social-media"><a href="https://www.linkedin.com/company/websitebuildersamerica/?viewAsMember=true" class="fa fa-linkedin"></a>
  <a href="https://www.instagram.com/websitebuildersamerica/" class="fa fa-instagram"></a>
  <a href="https://twitter.com/WebsiteAmerica" class="fa fa-twitter"></a></div>

</div>
  

   </div>
  </div>
</div>




<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">







  <div class="footer">© 2020  KENUGS MOVERS. ALL RIGHTS RESERVED.</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 0.8px;
}

body {
  background-color: white;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.8px;
  }

.hero-image {
  background-image: url("https://images.pexels.com/photos/5025628/pexels-photo-5025628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: white;
  height: 750px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 44px;
}


.hero-text {
  
  
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   color: white;
  font-size: 28px;
}


#page-wrapper {
  position: relative;
}

#landing-title {
  text-align: center;
  padding-bottom: 100px;
  font-size: 50px;
  color: white;
}


.landing {
  color: black;
  text-align: center;
  font-size: 30px;
  padding: 300px 0 0;
  font-weight: bold;
}

.landing-desc {
  color: black;
  text-align: center;
  font-size: 20px;
  padding-top: 20px;
  margin-bottom: 50px; 
}

.submit-button {
  display: block;
  width: 20%;
  padding: 15px;
  margin: 100px 0 100px;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  color: black;
  font-size: 18px;
  border: 3px solid black;
}

.submit-button:hover {
  color: white;
  background-color: black;
}


.logo {
  width: 55vw;
  color: white;
  font-size: 17px;
}

@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.logo > p {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 650px) {
  .logo > p {
    margin: 0 auto;
  }
}



l1 {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: gray;
}

.top-header {
  position: fixed;
  top: 0;
  min-height: 10px;
  padding: 10px 0px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: black;
  background-color: black;
}

@media (max-width: 500px) {
  header {
    flex-wrap: wrap;
  }
}

nav {
  font-weight: 500;
  font-size: 17px;
  align-items: center;
  text-align: center;
}

@media (max-width: 800px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0px 50px;
  }
  nav li {
    padding-bottom: 5px;
  }
}

nav > ul {
  width: 38vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 500px) {
  nav > ul {
    flex-direction: row;
  } 
 }

add a z-index to the top-header . Z-index property specifies the stack order of elements on a page. Simply means placing the element on top or below . You can read more about z-index on google.

z-index: 1;
1 Like

Thank you, it worked!! I will read more about it. Thanks so much!!

1 Like

Sophi,

Can I ask you one more question?

So I added a filter to my hero-image in an attempt to make my hero-text get more attention. However, when I added the filter, it also added it to my hero-text, so now both the hero-image and hero-text look dark.

Do you have an idea on how to keep the hero-text not filtered?

Here is my pen now: https://codepen.io/turchan/full/WNxzQMe

HTML

<div id="page-wrapper">

  <header class="top-header">
    
    <div class="logo">
      <p><a class="nav-link" href="https://cdpn.io/turchan/debug/gOMMmZo/DqkDdgxnnVKk"><strong>MOVERS</strong></a></p>
    </div>
    
    <nav id="nav-bar">
      <ul>
 
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/NWrxRrO/DqrDdgxnnEgr"><strong>ABOUT US</strong></a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/JjKJgWE/VJrxxOvnnwdr"><strong>SERVICES</strong></a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/ZEOJzqv/yPkJjKgJNmbk"><strong>LOCATIONS</strong></a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/zYBdOER/wQAPozejjPxr"><strong>CONTACT</strong></a></li>
        
      </ul>
    </nav>
  </header>
  
  
  
  <div class="hero-image">
   <div class="hero-text">
     <h1 id="landing-title"><strong><span class="in-love">HOME RELOCATION</strong></span></h1>
  
   </div>
  </div>
  

<div>
  <h2 class="landing">We are a team of dedicated movers ensuring you an affordable hassle free home relocation</h2>
    <p class="landing-desc">We are a one-stop-shop for all your moving/ hauling or relocation needs. Your satisfaction is guaranteed.</p>
  </div>
  
  <div class="from-group">
      <button
              type="submit"
              id="submit"
              class="submit-button"><strong>CALL OR TEXT US NOW!</strong></button>
    </div>

  
<div class="hero-image-2">
   <div class="hero-text-2">
     <div class="container-address">
       
       
<div class="address">KENUGS MOVERS<br>
       
MINNEAPOLIS METRO AREA<br>

MONDAY- SUNDAY EVERY DAY FROM 7AM TO 11PM<br>

</div>
       
<div class="email-phone">

(832) 417-9305 Emmanuel<br>
       
(832) 417-9065 Joyce<br>
       

<div class="social-media"><a href="https://www.linkedin.com/company/websitebuildersamerica/?viewAsMember=true" class="fa fa-linkedin"></a>
  <a href="https://www.instagram.com/websitebuildersamerica/" class="fa fa-instagram"></a>
  <a href="https://twitter.com/WebsiteAmerica" class="fa fa-twitter"></a></div>

</div>
  

   </div>
  </div>
</div>




<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">







  <div class="footer">© 2020  KENUGS MOVERS. ALL RIGHTS RESERVED.</div>
  
  

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 0.8px;
}

body {
  background-color: white;
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.8px;
  }

.hero-image {
  background-image: url("https://images.pexels.com/photos/5025628/pexels-photo-5025628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  filter: brightness(50%);

  background-color: white;
  height: 750px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 44px;
}


.hero-text {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 28px;
}


#page-wrapper {
  position: relative;
}

#landing-title {
  text-align: center;
  padding-bottom: 100px;
  font-size: 50px;
  color: white;
}


.landing {
  color: black;
  text-align: center;
  font-size: 30px;
  padding: 300px 0 0;
  font-weight: bold;
}

.landing-desc {
  color: black;
  text-align: center;
  font-size: 20px;
  padding-top: 20px;
  margin-bottom: 50px; 
}

.submit-button {
  display: block;
  width: 20%;
  padding: 15px;
  margin: 100px 0 100px;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  color: black;
  font-size: 18px;
  border: 3px solid black;
}

.submit-button:hover {
  color: white;
  background-color: black;
}


.logo {
  width: 55vw;
  color: white;
  font-size: 17px;
}

@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}

.logo > p {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

@media (max-width: 650px) {
  .logo > p {
    margin: 0 auto;
  }
}



l1 {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: gray;
}

.top-header {
  position: fixed;
  z-index: 1;
  top: 0;
  min-height: 10px;
  padding: 10px 0px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: black;
  background-color: black;
}

@media (max-width: 500px) {
  header {
    flex-wrap: wrap;
  }
}

nav {
  font-weight: 500;
  font-size: 17px;
  align-items: center;
  text-align: center;
}

@media (max-width: 800px) {
  nav {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0px 50px;
  }
  nav li {
    padding-bottom: 5px;
  }
}

nav > ul {
  width: 38vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 500px) {
  nav > ul {
    flex-direction: row;
  } 
 }



For me, instead of having a filter, I think the easier way is having an overlay on the image. So I would do

background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("https://images.pexels.com/photos/5025628/pexels-photo-5025628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");

There’s certainly a lot of ways to achieve the same result but this is the way I use mostly. You can look on sites like w3schools.com or css-tricks.com for more examples

1 Like

Sophi,

Ah I see, I’v e learned that on FCC. It totally slipped my mind. It worked and looks beautiful now. Thank you very much Sophi! I really appreciate it :two_hearts:

My pleasure. Anytime.

1 Like