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:
*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;
   // 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


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:

1 Like

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


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.