Tell us what’s happening:
Describe your issue in detail here.
Hi,
I have put my navbar at the top of viewport but when I scroll the page down, some of navbar is visible while the rest get’s hidden behind the video.
How can i fix this?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link href="styles.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Landing Page</title>
</head>
<body class="1">
<header id="header">Best Soccerballs<img id="header-img" src="https://media.istockphoto.com/vectors/footballball-stamp-vector-id522396890?s=612x612" width="90" height="83">
<div class="flex-container"><nav id="nav-bar">
<a class="nav-link" href="#Feature">Feature</a>
<a class="nav-link" href="#How we make it">How we make it</a>
<a class="nav-link" href="#Price">Price</a>
</nav></div>
</header>
<main>
<h2>Made by leather</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form"> <input type="email" id="email" placeholder="Email"
name="email" multiple><br><br></input>
<input id="submit" value="Submit" type="submit">
<section id="Feature">
<h3>Premium Materials</h3>
<span>⚽</span>
<section id="How we make it">
<iframe id="video" id="how_to_make_it"
width="560" height="315" src="https://www.youtube.com/embed/qFTPU5IHjbc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<div>
<h4> Limited Edition Leather Ball</h4>
<h3>$499</h3>
<br>
<p>Great for professional use</p><input id="select" value="SELECT" type="submit">
<section id="Price">
</div>
</main>
<footer>
<div>© Copyright 2022, <i><bold>Best Soccerballs</i></bold></div>
</footer>
</body>
</html>
/* file: styles.css */
@media only screen and(max-width:600px){
.1 {width:100%;}
}
body { background: linear-gradient(70deg, #fdcd3b 45%, #ffed4b 60%);
width: 450px;
}
header[id="header"]{
position: fixed;
top: 30px;
left: 100px;
font-size: 30px;
font-family: tahoma, sans serif;
color: #778899;
width: 100%;
}
img {
position: absolute;
left: -100px;
border-radius: 40px;
top: -25px;
}
nav {
position: relative;
font-size: 20px;
left: 400px;
top: -30px;
}
a {
color: #778899;
text-decoration: none;
margin: 13px
}
a:hover{
background-color: lightgray;
}
main h2 {
color: #778899;
font-family: verdana;
position: relative;
top: 150px;
left: 330px;
font-size: 28px
}
a:active {
background-color: lightyellow;
}
input[id=email] {
font-size: 17px;
position: absolute;
left: 380px;
top: 210px;
}
input[id=submit] {
background-color:;
cursor: pointer;
font-size: 13px;
background-color: #778899;
color: black;
position: absolute;
left: 440px;
border-radius: 5px;
top: 250px
}
input[id="submit"]:hover {
background-color: lightgray;}
h3 {
position: relative;
top: 170px;
left: 200px;
font-size: 23px;
font-family: verdana;
}
span {
font-size: 41px;
position: relative;
top: 105px;
left: 97px;
}
iframe {
position: absolute;
top:450px;
left: 210px;
}
main div {
width:350px ;
height: 250px ;
border: 5px solid gray ;
margin:10px ;
position: absolute;
top: 850px;
left: 310px;
background-color:white ;
}
div h4 {
position: absolute;
top: -20px;
left: -20px;
margin: 20px;
padding: 20px;
background-color: lightgray;
width: 310px;
font-family:seriff;
}
div h3 {
position: absolute;
top: 50px;
left: 150px;
letter-spacing: 1.5px;
font-family: arial;
}
div p{
position: absolute;
top: 140px;
left: 97px;
font-weight: bold;
}
div input {
position: absolute;
top: 220px;
left: 140px;
cursor: pointer;
font-size: 17px;
background-color: gold;
color: black;
border-radius: 2px;
font-family: arial;
border: hidden;
}
div input:hover {
background-color: lightgray;
}
footer div {
position: relative;
top:920px;
}
.flex-container {
display:flex;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: