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

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

#1

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

#2

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.


#3

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


#4

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.


#5

Thank you for explaining that for me.


#6

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;
}

#7

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


#8

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