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 (
    at n. (
    at r (
    at (
    at i.runTest (
    at r (
    at n (

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 {
    overflow: hidden;
/*     position: fixed; */
    top: 0;

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

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