Landing Page Feedback NavBar Fail

Hello.

Please help. I too am failing to pass the portion of this challenge that requires the navigation bar to be fixed to the top. I had to overlap the nav bar and the logo but I did manage to fix it to the top of the page in my media query. I assume the test is looking for a specific declaration or attribute? Code and link follow and thanks for any feedback/guidance.

Link: https://codepen.io/rjlamont/pen/KKaYjmO

Relevant html:

<header id="header">
  <nav id="nav-bar">
    <ul>
      <li><a href="#small-krafts" class="nav-link">Small Krafts</a></li>
      <li><a href="#medium-krafts" class="nav-link">Medium Krafts</a></li>
      <li><a href="#large-krafts" class="nav-link">Large or Custom Krafts</a></li>
    </ul>
  </nav>

Relevent css:

#nav-bar {
  padding: 10px;
  width: 220px;
  background-color: red;
  position: absolute;
  left: 80%;
  bottom: 45%;}
ul {
  list-style-type: none;
}
li a {
  display: block;
  padding: 10px;
}
@media all {
  #nav-bar {
    position: fixed;
  }
}

Hello!
Your media query syntax doesn’t look correct. Can you change the #nav-bar positioning up above from absolute to fixed instead?
~HiL

Update: I moved the nav bar up some more, 80% from bottom, so that the box it’s in touches the top of the page. Also changed position to fixed. Test still fails. Fail message reads, “#header or one of it’s children should be at the top of the viewport even after scrolling.” Isn’t “nav” a child of #header? It is fixed to the top of the page and stays in position, even when scrolling. I don’t understand how the conditions haven’t been met. Fail message continues, “Expected 105.8984375 to be close to 0 +/- 15.” Could someone please translate this part of the fail message into something a newby can understand and thereby know how to correct?

Thank you. Any help is greatly appreciated.

Hi, Hilbug!

Thanks so much for your reply. I was typing an update when your reply came through. I did try exactly what you suggested, to no avail.

Hello!
When I right-click to “inspect” on full-page view and picked ‘iPad Pro’, there is a bunch of whitespace above the navbar box. You can also see this if you zoom-out on the webpage. I believe this is causing the test to fail. When I remove left 80% and bottom 80%, the test passes. So I think you’ll need to figure out the positioning some more.
~HiL

Thank you. This helped immensely. I initially put in the ‘left and bottom 80%’ because that was the best way, to my knowledge, to move the bar to the right side of the page, which I had to do because of the logo design, which I didn’t create and don’t know how to alter. Removing it moved the nav bar to the top left which blocked a portion of the logo. What I ended up doing was changing the “bottom 80%” to “top 0%” and that got me the test pass. Thanks again for your helpful replies.

@hirerjl Looks good! Nice job. :slight_smile: ~HiL