Stuck on the product landing page. The navbar should always be at the top of the viewport

I have the nav staying at the top of the screen, but it is not validating.
Also, when I make the page smaller, the form is hidden by the navbar. The only reason it is not hidden at a full-size screen is that I have several
's. I know that there has to be a better way, can anyone please provide some direction?

See the Pen Product Landing Page by Anthony Aldea (@aaldea) on CodePen.

This is the error

  1. The navbar should always be at the top of the viewport. AssertionError: #header or one of its children should be at the top of the viewport : expected 20 to be close to 0 +/- 15
    at Function.assert.approximately (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:18706:36)
    at n. (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:21682:23)
    at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:7852)
    at r.run (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:8853)
    at i.runTest (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13553)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:14192
    at r (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13024)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:13000
    at n (https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12791)
    at https://cdnjs.cloudflare.com/ajax/libs/mocha/3.0.2/mocha.min.js:2:12855

I don’t know if this is the issue but…

It’s hard to tell because your text fits on less than one page, but if you narrow your view window and select a navigation link, the linked text is covered by the navbar. This may be one of the things it is testing for.

Thank you. I will keep testing. I am really not sure how to narrow the view, but I will start searching!

To narrow the view, you can just grab the browser window and make it skinnier. In the dev tools there are also ways to simulate different devices.

1 Like

Thank you for explaining that for me.

Think the problem is that your <ul class="top-nav"> that has a fixed position its not a direct child of <header id="header"> but its a child of <nav id="nav-bar">.

Just for testing make the #header position fixed and coment out the one in the ul like:

#header {
  position: fixed;
  top: 0;
}
.top-nav {
    width:100%;
   
    overflow: hidden;
/*     position: fixed; */
    top: 0;
}
9 Likes

Confirming that this solution works @sorinr! Thanks for helping.

I had the same problem. This worked for me, too. Thanks so much!