Navbar is floating down from the top of my website

1

So when I first implemented the navbar, (thanks W3schools) it worked exactly as it should. Somewhere along the way, when designing the actual content of my site, it started floating like 10-20 pixels from the top of the screen.

I have a version from before this happened, but I can’t tell what I did in order to bug it.

Current version: https://codepen.io/ChampCoder/pen/jLVdgV

Previous version: https://codepen.io/ChampCoder/pen/yXmeMB

If anyone would take a moment to check it out, I would very much appreciate it.

2

In the most recent version, you gave the navbar a position:fixed; but didn’t tell it to stay at the top of the page. A simple top:0; will suffice!

Also, your CSS styling for the body has an error. It should be background-repeat:no-repeat; and not only no-repeat;.

1 Like
3

Thanks so much! It’s been bugging me for a while.

But how come it changed, since I’ve never had the top:0;?

And I originally had the background-repeat: attached, but I deleted it since it seemingly didn’t change anything, and I didn’t understand what it did. What does it do?

4

Your navbar wasn’t fixed before, that’s why it was at the top without any space, it was simply on top of the other elements of your page.

The background-repeat:no-repeat; basically stops your image from repeating itself.

With no-repeat:

Without no-repeat:

1 Like
5

Ahh I see now. Thanks!

6