1. The navbar should always be at the top of the viewport. Even after setting position to fixed

HTML-CSS
#1

Hello, Guys Please I need help with my landing page project.

Two issues: the first is “The navbar should always be at the top of the viewport.” Even when I have used the position value of fixed on the nav-bar element yet it’s not letting me pass that story.

Secondly, am trying to make my landing page look like thisgregobyte.com not like the whole site but just the way the fonts are arranged side by side with the images, I feel I can use flexbox to do this but not just sure how and what exactly I need to do to get them to align properly. here is my codepen: my codepen

#2

Regarding the first question, the clue is in the assertion error message: “#header or one of its children”. The test is looking for the element with id="header" or one of its direct children (with no intermediate descendents).

#3

yeah, but the header element contains the id=header and id= nav-bar, and the navbar which is contained in the header element was positioned to fixed, do you know how else it can be done? @lionel-rowe

1 Like
#5

The key is this:

In other words, this should pass:

<header id="header">
  <nav style="position: fixed; top: 0"></nav>  
</header>

But this won’t:

<header id="header">
  <div>
    <nav style="position: fixed; top: 0"></nav>  
  </div>
</header>
1 Like
#6

Thanks Man i had to make the nav element directly next to the id=“header” and it worked, thanks again @lionel-rowe

#7