Product Landing Help

Tell us what’s happening:
3 issues:
-I am unable to create a .nav-link to the corresponding headers
-i have a id=“submit” but not sure why it’s saying I dont have one
-need help with a third error (layout instruction 1)

thanks!
I am new to freeCodeCamp.

Your code so far
https://codepen.io/Suphia/pen/ExKKJgL

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

Welcome to the forums @suphia.zaman. You’re doing good so far.

You’re not linking correctly. Please review the lesson link to internal sections of a page

The message reads #submit should be a child of the #form element You don’t have form element

Not sure what you need help with. The failing test says;

The navbar should always be at the top of the viewport.
#header or one of its children should be at the top of the viewport even after scrolling

You haven’t done anything within the #header selector in CSS that would fix the position to the top.

1 Like

-i have a id=“submit” but not sure why it’s saying I dont have one

The error message reads the following:

#submit should be a child of the #form element : expected 2 to equal 1

The project only requires you to have one submit button, but for some reason there are two submit buttons in your form. The “expected 2 to equal 1” is indicating this, that they were only expecting 1 submit button.

1 Like

Thank You! I was able to fix the issues, but currently i am unsure of what i am missing since I fixed the #header section. The header is in front of all the other writing. Not sure how to keep that in place and let the other coding scroll through behind it.https://codepen.io/Suphia/pen/ExKKJgL

Layout Section

1. The navbar should always be at the top of the viewport.

#header or one of its children should be at the top of the viewport : expected 19.90625 to be close to 0 +/- 15 AssertionError: #header or one of its children should be at the top of the viewport : expected 19.90625 to be close to 0 +/- 15

Not sure about this. Need a pointer. Thanks…

I hope this will help. It’s a good article specifically for this issue: https://www.freecodecamp.org/news/how-to-keep-a-navbar-at-the-top-of-my-viewport/

1 Like

Hey there,

you are using position: fixed; for your header.

To make the header positioned fixed, 5px away from the top, you can use top: 5px;

@suphia.zaman, your content is being covered by the overly large navbar that you have.
To size it down a little, in HTML get rid of the unordered list and make it like this;

<nav id="nav-bar">
  <a class="nav-link" href="#Our Products">Our Products</a>
  <a class="nav-link" href="#Bikes-Offered">Bikes Offered</a>
  <a class="nav-link" href="#Accessories">Accessories</a>
</nav>

You’ll see your navbar is smaller and more of your text can be seen. What you want to do is work it so the image/logo is a little smaller and to the left and on the same line have the links to the sections. When you have a workable, pleasing looking navbar you’ll be able to see your text much better.
On a desktop you don’t want a navbar that takes up half the screen view.