Help with keeping Navbar at top of page

I’m working on my web design cert and am completely stumped on the User Story #13: The navebar should always be at the top of the veiwport.

This is what I’ve done so far: https://codepen.io/Rhyansolis/pen/GRoVEgv
*Ignore the rest of it. I’m still working on cleaning it up, but wanted to focus on the rules first.

hey @rhyanjenks,

You need to add a fixed position to your header

#header {
   position: fixed;
   top:0;
   // css
}

also this will move the rest of you page up so you will want to add some padding to the top of your main so it doesn’t overlap

3 Likes

The crucial part of the error message you get when failing the test in question is:

#header or one of its children should be at the top of the viewport even after scrolling

The following link will take you to a good, straightforward explanation of the position property:
https://www.w3schools.com/css/css_positioning.asp

1 Like

Thank yall! For the solution, but also for the supplemental reading for position as well.

2 Likes

Do what the others said and then set the margin-top of the main section to around 250px so the navbar will be at the top and there will be no overlapping. Change the navbar accordingly then.