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;
}
}
Sophi-E
October 29, 2020, 9:48pm
#2
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;
}
}
Sophi-E
October 29, 2020, 11:02pm
#5
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
