Product landing page help, I don't know what I did wrong

I was on something and one of the requirements is that the #nav-bar is always at the top of the viewport, so I built it so that it would be at the top of the viewport, at least i thought, but the requirement is incomplete. I seriously do not understand what is going on.

/* file: index.html */
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>IDK</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    
    <div id="top-bar">
      <header id="header">
        <nav id="nav-bar">
         <ul>
            <li><a class="nav-link" href="#nij">nij</a></li>
            <li><a class="nav-link" href="#kin">kin</a></li>
            <li><a  class="nav-link" href="#tik">tik</a></li>
            </ul>
            </nav>
         

Hello @jacobpkerr.04.

From what I can gather on what you’ve written so far, I can say it’s best if you at least do complete the HTML and CSS section first. You can do tweaks on your code there after if something doesn’t pass the test.

That is what I did. I focused on building and completing the project, and if ever some of my code doesn’t pass the test (because of a typo or some element is missing), I would work to modify it till so.

Here’s a hint for that #nav-bar, remember the position: property on CSS? What value makes the element stick/fix to the viewport and not overflow when scrolling?

I completed all of it, including the css, but still it asks for #nav-bar to be at the top of the viewport

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IDK</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
      
      <div id="top-bar">
        <header id="header">
          <nav id="nav-bar">
           <ul>
              <li><a class="nav-link" href="#nij">nij</a></li>
              <li><a class="nav-link" href="#kin">kin</a></li>
              <li><a  class="nav-link" href="#tik">tik</a></li>
              </ul>
              </nav>
              <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"/>
          
          </header>
        </div>
        <h2 id="nij">This one</h2>
        <p>Bringing unlocked me an striking ye perceive. Mr by wound hours oh happy. Me in resolution pianoforte continuing we. Most my no spot felt by no. He he in forfeited furniture sweetness he arranging. Me tedious so to behaved written account ferrars moments. Too objection for elsewhere her preferred allowance her. Marianne shutters mr steepest to me. Up mr ignorant produced distance although is sociable blessing. Ham whom call all lain like.</p>
        <h2 id="kin">That one</h2>
        <p>Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. Now set offended own out required entirely. Especially occasional mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put boy carried chiefly shy general.</p>
        <h2 id="tik">Your one</h2>
        <p>Had strictly mrs handsome mistaken cheerful. We it so if resolution invitation remarkably unpleasant conviction. As into ye then form. To easy five less if rose were. Now set offended own out required entirely. Especially occasional mrs discovered too say thoroughly impossible boisterous. My head when real no he high rich at with. After so power of young as. Bore year does has get long fat cold saw neat. Put boy carried chiefly shy general.</p>
        <iframe id="video" width="250" height="250" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&controls=0&showinfo=0"></iframe>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input id="email" placeholder="Enter your email" type="email" name="email"></input>
          <input id="submit" type="submit"></input>
        </form>
      </body>
  </html>

Can I ask for your CSS code?

yes, im sure its terrible but here you go

#header-img {
  width: 300px;
  margin-top: 10px;
}
.nav-link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (max-width: 500px) {
  .nal-link {
    font-size: 18px;
  }
}
#nav-bar {
  position: absolute;
  padding: 0;
  margin: 0;
}

As I’ve said, what the instructions mean is that the #nav-bar should always be at top of the viewport… even if you are scrolling downwards, the nav-bar should always stay there.

You do remember that the position: property has multiple values like fixed, sticky, relative and absolute which is what you used.

Though absolute is mostly used to change the position of an element, what value do you think not only changes the position but makes it fixed to the viewport?

1 Like

Thank you, I don’t think Ive ever used that value, didnt know it existed, also wasn’t quite sure what the question was asking me so thank you for clarifying that, have a good day. Happy coding.

I think you should download an IDE (Integrated Development Environment) like I did. I use VS Code to build the projects given on fCC and I would then import those to the fCC editor to pass the tests.

Simply, it helps you to write code (displays properties you want to use when typing the first letter of the word) and organize your files (you can integrate Git). You can also download extensions to spice up your workplace.

okay, might give it a try, thanks again

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