It says #nav-bar should always be at the top of the viewport
I have tried all I could. Pls help me with the code to fix this. Thanks.
Your code so far
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your mobile information:
iPhone - iOS17.5.1
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
Please copy your code to the post so we can help.
1 Like
#header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
/* Createdby Me styles */
.createdByMe {
display: flex;
align-items: center;
}
.createdByMe img {
height: 40px;
margin-right: 10px;
border-radius: 5px;
}
/* Navigation styles */
#nav-bar {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
#nav-bar .nav-link {
color: #fff;
text-decoration: none;
padding: 10px 15px;
margin-left: 10px;
}
#nav-bar .nav-link:hover {
background-color: #555;
}
#header > * {
margin-right: 20px;
}
#header > *:last-child {
margin-right: 0;
}
These are all my code for the header element. It says #nav-bar should always be at the top of viewport .
I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').
What about your html?
I would share that as well.
Also have you tried to select the nav bar directly and set its display to fixed and its top to 0?
1 Like
<header id="header">
<div class="createdByMe">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-OaK6lNwXAp3dUr64IKONo06Jt-AlDZ7g3g&usqp=CAU" alt="Original Ponmo Logo" id="header-img">
<p>Original Ponmo</p>
</div>
<nav id="nav-bar">
<a href="#features" class="nav-link">About</a>
<a href="#how-it-works" class="nav-link">How It Works</a>
<a href="#pricing" class="nav-link">Pricing</a>
</nav>
</header>
Hi there, did you solve the issue?
1 Like
I haven’t been able to. I have supplied the html code and css code. I wish to finish this project tonight and be done with it. Thanks.
Have you tried my suggestion?
Can you share the new code which includes the changes?
Did you mean I should remove the #nav-bar from the header element and then style it with position: fixed and top: 0 ? Pls explain further.
No. I was suggesting you add a navbar selector in your css.
This is my css code for #nav-bar
Instead of sharing bits and pieces, please share the entire styles.css file.
Please share the entire index.html as well
/* Reset styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Global styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
margin: 0;
padding-top: 60px;
}
/* Header styles */
#header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 10px;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
/* Createdby Me styles */
.createdByMe {
display: flex;
align-items: center;
}
.createdByMe img {
height: 40px;
margin-right: 10px;
border-radius: 5px;
}
/* Navigation styles */
#nav-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
left:0;
width: 100%;
z-index: 999;
padding: 10px;
}
#nav-bar .nav-link {
color: #fff;
text-decoration: none;
padding: 10px 15px;
margin-left: 10px;
}
#nav-bar .nav-link:hover {
background-color: #555;
}
#header > * {
margin-right: 20px;
}
#header > *:last-child {
margin-right: 0;
}
/* Main content styles */
main {
margin-top: 4rem;
padding: 2rem;
}
section {
margin-bottom: 2rem;
}
h2 {
margin-bottom: 1rem;
}
#features p{
transform: translateY(32px);
}
#features h4{
transform: translateY(40px);
}
/* Pricing styles */
.product-card {
border: 2px solid #ccc;
padding: 1rem;
text-align: center;
margin-bottom: 1rem;
width: 200px;
}
.pricing-flex {
display: flex;
gap: 30px;
}
span{
background: repeating-linear-gradient(90deg, #200bba, #431001, #900eec);
color:white;
}
.select-btn {
display: inline-block;
background-color: #333;
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 4px;
margin-top: 1rem;
}
.select-btn:hover {
background-color: #666;
}
/* Video section styles */
#video {
text-align: center;
}
/* Form section styles */
#form {
text-align: center;
margin-top: -95px;
position: absolute;
left: 180px;
}
#form h4 {
white-space: pre; /* this prevents the texts from breaking */
margin-bottom: 10px;
}
#email {
padding: 0.5rem;
margin-right: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
#submit {
background-color: #333;
color: #fff;
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
cursor: pointer;
}
#submit:hover {
background-color: #666;
}
/* Footer styles */
footer {
background-color: #f2f2f2;
padding: 1rem;
text-align: center;
width: 100%;
}
.footer-links a {
color: #333;
text-decoration: none;
margin: 0 0.5rem;
max-width: 1200px;
}
.footer-links a:hover {
color: #666;
}
/* Media query for smaller screens */
@media (max-width: 768px) {
#header {
flex-direction: column;
align-items: flex-start;
}
#nav-bar {
flex-direction: column;
margin-top: 1rem;
}
.nav-link {
margin-left: 0;
margin-bottom: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FreeCode Camp Project2</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="header">
<div class="createdByMe">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-OaK6lNwXAp3dUr64IKONo06Jt-AlDZ7g3g&usqp=CAU" alt="Original Ponmo Logo" id="header-img">
<p>Original Ponmo</p>
</div>
<nav id="nav-bar">
<a href="#features" class="nav-link">About </a>
<a href="#how-it-works" class="nav-link">How It Works</a>
<a href="#pricing" class="nav-link">Pricing</a>
</header>
<hr width= "160%" color="#200bba" size= "4" >
<main>
<section >
<h4>Get Familiar With Our Crispy Ponmo!</h4>
<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
<input name="email" type="email" id="email" placeholder="Enter your email address" required> <br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</section>
<section id="features">
<h4>Our Ponmo comes with:</h4>
<p>Ponmo (cow skin) contains a lot of collagens which prevents body wrinkles and it's the most abundant protein in our bodies.</p>
</section>
<section id="how-it-works">
<h4>How It Works</h4>
<p>Ponmo (cow skin) is a good weight loss substitute because it contains fewer calories and tastes nice when properly cooked in dishes</p>
</section>
<section >
<h2>Product Video</h2>
<iframe id="video" width="560" height="315"
src="https://www.youtube.com/embed/rUYDArNlCRs"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
allow="fullscreen"
title="Product Showcase Video"
loading="lazy"
referrerpolicy="origin">
</iframe>
</section>
<section id="pricing">
<div class="pricing-flex">
<div class="product-card">
<h4>12pcs of Crispy Ponmo - <span>₦1500</span></h4>
<p>Buy</p>
<p>Soak</p>
<p>Spice</p>
<p>Enjoy</p>
<a href="#" class="select-btn">Select</a>
</div>
<div class="product-card">
<h4>6pcs of Crispy Ponmo</h4>
<p><span>₦750</span></p>
<p>Buy</p>
<p>Soak</p>
<p>Spice</p>
<p>Enjoy</p>
<a href="#" class="select-btn">Select</a>
</div>
<div class="product-card">
<h4>4pcs of Crispy Ponmo</h4>
<p><span>₦500</span></p>
<p>Buy</p>
<p>Soak</p>
<p>Spice</p>
<p>Enjoy</p>
<a href="#" class="select-btn">Select</a>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-links">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Contact</a>
</div>
<p>Copyright 2024, Crispy Ponmo</p>
</footer>
<script src="script.js"></script>
</body>
</html>
HTML code
you have a typo here. The file is styles.css not style.css
hello any help with adding video on my code ,
i am getting error and it is not showing
If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.
The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
