I’m working on the final project for Responsive Web Design and I keep failing the test for: “Navbar should be at top of viewport” – even though it appears to be.
Can anyone take a look at it and see what I’m doing wrong?
https://codepen.io/teedeet/pen/bGBzNNb
Also, I haven’t gotten around to it yet, but can anybody help me understand why the second section isn’t visible on the page? Thanks!
The exact quote of the test is…
This means even as a user scrolls down, the navbar be should remain at the top of the page.
You can do this by changing the position property.
https://www.w3schools.com/css/css_positioning.asp
I’m not sure how it looks on other browsers, but when I scroll down , the navbar stays at top. Right now, my position is set to: “fixed”.
You’re code has two instances of the header selector. In the second selector you’ve set it as absolute.
Right, I just caught that! But even after changing it, I still fail.
So after removing the line for padding (I put it there to center the text), the test passes. Any reason for this?
The navbar position should be at the top. When you add padding to the top of the header it pushes the nav bar down away from where it should be to pass the test.
Great – thanks for your help!