Setting the navigation bar to "position: fixed;" messes up website

Whenever I set the navbar to fixed it moves the HR element beneath it, above it and it moves my h1 up. Sorry if this is a really dumb question but I can’t find an answer to it anywhere else. CodePen Webpage and this is how it is sopposed to look like:

That’s because position: fixed “removes” your nav ul from all it’s parent elements.

It doesn’t remove it physically in the html, but the rules of its parent elements no longer impact it.

What’s the goal here?

If you want it to look like the picture simply remove the position: fixed.

The goal is to keep it fixed and still have the HR element below it. In the picture it isn’t fixed to the top

Then a few things you need to do:

If you want the HR element to be the top element below the navbar then you need to check the height of the navbar as it is now. (which is 84px).

So you first give your hr element margin-top: 84px;
Next you remove the position: fixed from nav ul and place it on nav element.
You’ll also need: top: 0, left: 0, right: 0

This will cause the fixed element to be on top but push the hr element and everything below it down 84px so it’s not on top.

Next you have to prevent the text from bleeding through when you scroll down in mobile.

So you’ll have to add z-index: 400 (or any number > 1) to the nav element.
Then finally you’ll have to add background color #f2f2f0 to the nav element.

That should do it.

You have a lot of bad habits in your code. ie., floats,
,


is naming a few. But the instructions above should help you with what you asked for.

Thanks, I’m still beginning into the world of web developement but I hope to improve my skills. I’ll try this out.

Also I removed the floats and I’ll make sure I just have whole numbers

It worked, thanks for the help.