Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.
I’ve tried everything i think i can but i keep on getting " Your #nav-bar should always be at the top of the viewport."
Can anyone spot my mistake and correct me pls?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <header id="header">
        
          <div class="logo">
            <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones Logo">
         </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>
          </ul>
        </nav>
      </header>
    <div>
      <form id="form" action="https://www.freecodecamp.com/email-submit">
        <h2>Handcrafted, home-made masterpieces</h2>
        <input id="email" name="email" type="email" placeholder="Enter your email address">
        <input id="submit" type="submit">
      </form>
    </div>
    <section id="Features">

    </section>
    <section id="How_It_Works">
      <video id="video" src="https://youtu.be/y8Yv4pnO7qc">
    </section>
    <section id="Pricing">

    </section>
  </body>
</html>

/* file: styles.css */
html{
  box-sizing: border-box;
}
body{
  font-family: sans-serif;
}
header{
  display: flex;
}
img{
  width: 250px;
  position: relative;
  margin-top: 20px;
}
nav{
  display: flex;
  flex-direction:column;
  width: 100%;
  text-align: center;
  padding: 0 50px;
}

ul{
  list-style: none;
  display: flex;

  
}
form{
  text-align: center;
}
@media (max-width: 960px) {
  .nav-link{
    display: flex;
    flex-direction: row;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

To make the navigation bar stick to the top of the viewport, you need to add the CSS property { position: fixed; } to your “nav-bar” .

nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  padding: 0 50px;
  position: fixed;  /* Add this line */
}

and the header styles could be adjusted to ensure that the content below the navigation bar is not hidden behind it. You can add padding to the body or margin to the sections.

body {
  font-family: sans-serif;
  padding-top: 60px; /* Adjust this value as needed. this padding ensures that the content below the fixed navigation bar is visible. */
}
2 Likes
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.