I don't know how to keep the navbar at the top of the viewport

1

My Pen

So i’m missing the last piece, and to be honest, i worked with a youtube video, who copy and past the whole navbar and then styled it a bit. I tried that myself and first, it now looks not what it was before, but i achieved the goal of the test, so i don’t really care ^^, but now this viewport is giving me trouble.

Please help :slight_smile:

2

When you’re coding with Codepen, the basic HTML is already configured for you. So when you’re typing into the HTML block it has already generated

<html>
  <head>
  </head>
  <body>
    <!-- This is where all of the html you're typing will go -->
  </body>
</html>

When your navbar has position: fixed; this gives you the ability to use the properties of top left right and bottom.

So step one is to remove the <body> and </body> from the code you’ve written.

Step two is to look at position:fixed here https://www.w3schools.com/css/css_positioning.asp
and see if you can solve why your navbar isn’t attached to the top of the viewport.

Best of luck!

3

hey thanks for the help, i read through it and understood the positioning. It is still not working. To my knowledge you put the in the body, which i did, but there still has to be some problem with my code. would you look into it again?

thank you in advance.

Edit: i found the mistake. i was calling class=navbar instead of calling the nav itself in the css :slight_smile: that happened because i changed a few things around and missed that part.

Thank you

1 Like
4

Great job getting it! Looking forward to seeing some of your other projects!

5