Product Landing Page Nav-Bar Failed Test?

#1

My pen - https://codepen.io/Tzadi-James/full/JxXQvj

keeps failing this test:

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

I do not understand why; the nav-bar stays at the top of the viewport in full page view and in the live server through VS Code.
Can anyone help me to figure this out?

#header or one of its children should be at the top of the viewport : expected 140 to be close to 0 +/- 15
a@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:139:475
FCC_Global</e.exports/s.prototype.assert@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:284:1304
H@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:262:7454
FCC_Global</e.exports/e[t]@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:325:124
FCC_Global</e.exports/n.approximately@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:224:4043
test/</</<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:53884
c@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31606
FCC_Global</</<[32]</</f.prototype.run@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:31544
FCC_Global</</<[33]</</m.prototype.runTest@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37112
i/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:37974
s@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36426
s/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:36495
o@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:35901
FCC_Global</</<[33]</</m.prototype.hook/<@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:159:35872
f@https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:154:205793

#2

I think the test is looking for either #header or one of its direct children to always stay on top of the page.
In your case the fixed element is a child of a child; and I fear the test is not handling this case.

A minor rework and you should be good to go :slight_smile:

#3

Thank you Marmiz,
I did move the nav-bar element up in the code, however it is still failing the test.
I here is the code now: https://codepen.io/Tzadi-James/full/JxXQvj

I don’t see any missing quote marks, colon’s or semi-colon’s, so I am confused as to why it is not working. I checked the coding on the sample pen and it looks like it is the same order in which I wrote mine.
Any further assitance would be appreciated, so I can 1) understand this and 2) move on to the next project.

#4

I did a quick test and changed you’re #header element in your css to also have a position: fixed and then it passed. I think the problem is that the test is looking for everything in your header to stay at the top of your page and not just your menu.

It does mean that your header will need a 100% width at least as well as some adjustments to where your page is scrolling to.

#5

Thank you blondfro.
I had to recreate the logo so the page looked a little better, but at least it passed the test now.

#6

You’re welcome man. Glad it worked!

#7