Product Landing Page not passing Layout test 1?

HTML-CSS
1

Hello,
I’ve run the tests in Firefox, Chrome and Edge but my product landing page always fails the “Navigation bar should always be at the top of the page” test. It is always fixed at the top of the page, so I don’t get why it’s failing this test.

CSS:

#nav-bar {
  background-color: var(--black);
  color: var(--white);
  box-shadow: 0px 5px 10px var(--grey);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 2;
  display: flex;
  flex-flow: row no-wrap;
  align-items: center;
  justify-content: flex-end;
}

Here is the link to my codepen: https://codepen.io/veritygriscti/pen/QWKrGvR?editors=1100

Has anyone else run into this?

2

I don’t know, you have kind of a weird hierarchy - at times the header takes up the whole page. Also, the test says:

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

But `nav-bar’ is not the child of the header, but is a grandchild - I don’t know if that is enough to break the test.

I might consider refactoring your html so that the navbar is the only thing in the header. I don’t know that will fix this, but that seems like a move in the right direction.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.