Hello guys!
There’s a request of the test that I struggle to complete. It’s " Your #nav-bar should always be at the top of the viewport."
I created an id in the style section called “#nav-bar” with position:fixed;
and created a element in html with id=“nav-bar”. If I scroll through the page, the nav bar actually stays in top… But it keeps telling me that I failed the task.
Can you help me?
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<style>
h1 {
font-size: 40px;
}
#header-img {max-width:30px;}
@media (min-width:800px) {
h1 {
font-size: 80px;
}
}
#nav-bar {
position:fixed;
top:0px;
font-size:20px;
background-color:pink;
}
nav li {
display: inline;
}
nav ul {
margin: 0px;
}
#box-container {
height:50px;
display:flex;
background-color:pink;
}
</style>
<html>
<header id="header"> <h1 id="header"> <img id="header-img" src="https://img.favpng.com/13/22/14/high-heeled-footwear-shoe-stiletto-heel-logo-png-favpng-0vEnctDeCTmezrvRpkxJEe4NE.jpg"> Dirty sHoe
<nav id="nav-bar" >
<ul>
<li> <a class="nav-link" href="#home"> home </a></li>
<li > <a class="nav-link" href="#buy"> buy </a></li>
<li > <a class="nav-link" href="#contacts"> contacts </a></li>
</ul>
</nav>
</h1>
</header>
<br>
<iframe id="video" src="https://www.youtube.com/watch?v=oR1Vkgjoweo&ab_channel=AmberScholl">
</iframe>
<br>
<h4 id="home"> home </h4>
<h4 id="buy"> buy </h4>
<h4 id="contacts"> contacts </h4>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" type="email" placeholder="type your email here" name="email">
<input id="submit" type="submit">
</form>
<div id="box-container">
</html>
/* file: styles.css */
**Your browser information:**
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36
Challenge: Responsive Web Design Projects - Build a Product Landing Page
Link to the challenge:
