Product Landing Page - Step 23

HTML-CSS
1

Tell us what’s happening:

I am failing step 23 “Your #nav-bar should always be at the top of the viewport.” I understand what is being asked of me but can’t figure out what I am missing.

Your code so far

<!-- file: index.html -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<script src="index.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Product Landing Page</title>
	<link rel="stylesheet" href="styles.css">
</head>
<div id="page-wrapper">

	<body>
		<header id="header">
			<div class="logo">
				<img id="header-img" src="https://www.design.com/maker/social/nb6z0b23m8" alt="Excelsior Journals" />
			</div>
			<nav id="nav-bar">
				<ul>
					<li>
						<a class="nav-link" href="#features">
							Features
						</a>
					</li>
					<li>
						<a class="nav-link" href="#how-it-works">
							How It Works
						</a>
					</li>
					<li>
						<a class="nav-link" href="#pricing">
							Pricing
						</a>
					</li>
					<li>
						<a class="nav-link" href="#form">
							Newsletter
						</a>
					</li>
					<li>
						<a class="nav-link" href="#contact">
							Contact
						</a>
					</li>

				</ul>
			</nav>
		</header>
		<main>
			<p>
			<div class="video">
				<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/watch?v=ngp5NyLfRXE&list=RDngp5NyLfRXE&start_radio=1&rv=c62_yTwex9E" frameborder="0" allow="autoplay; encrypted-media" autoplay="1" allowfullscreen></iframe>
			</div>
			</p>
			<section id="features">
				<p>
					<a>Features</a>
				</p>
			</section>
			<section id="how-it-works">
				<p>
					<a>How It Works</a>
				</p>
			</section>
			<section id="pricing">
				<p>
					<a>Pricing</a>
				</p>
			</section>
			<form id="form" action="https://www.freecodecamp.com/email-submit" /> Newsletter Subscribtion
			<input id="email" placeholder="placeholder  text" type="email" name="email" />
			<input id="submit" type="submit" name="submit" value="send"/>
		</main>
		<footer>
			<ul>
				<li id="contact"> Contact </li>
				<li> Privacy </li>
				<li> Feedback </li>
			</ul>
		</footer>
	</body>
</div>

</html>

/* file: styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

#page-wrapper {
    position: relative;
}

header {
align-items: center;
background-color: rgb(238, 238, 238);
box-sizing: border-box;
display: flex;
height: 75px;
justify-content: space-around;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 75px;
}

nav {
    display: block;
    unicode-bidi: isolate;
    font-weight: 400;
}

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

#nav-bar {
	position: static;
  top: 0;
	justify-content: top;
  display: grid;
	margin: 2em;
	border: 2em;
	padding: 2em;
}

input[type="submit"] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor: pointer;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi there!

Your nav element is a child of your header element. To put it always on the top, you need a position fixed and top value 0 in the header element selector

3 Likes
3

Hello!

Thank you for the response. Gosh, I must’ve been so tired I missed the obvious. Thank you again for the comment.

Cheers

1 Like
4

Your most welcome. Happy Coding