Question about Navbar covering up part of page

Howdy. I’m working on my Product Landing Page and I have an issue where the Navbar obscures part of the page. I found a fix on the Interweb but I can’t figure out why it works.

Can someone please explain why this keeps the top of my page from being covered up by the Navbar and is there a better way of fixing this issue just using HTML and CSS?

*[id]:before {
display: block;
content: " ";
margin-top: -70px;
height: 85px;
visibility: hidden;

Thanks for your help!

I’m guessing the navbar is covering up the element that comes after it because you have the navbar set to position: fixed.

As the docs for a fixed element says, “The element is removed from the normal document flow, and no space is created for the element in the page layout.”

So the next element after the navbar doesn’t know that the navbar is even there. It positions itself just as if you deleted the navbar–it goes to the top.

The simplest fix for this is to put a margin-top on the next element of the same size as the navbar. This will make the top of the element start exactly where the navbar ends.

There isn’t enough information here for me to figure out exactly what is going on here. Is the [id] the id of the navbar?

the :before with a content: “something here” will insert “something here” before the selected element. The rest of the properties there are, I think, making a kind of invisible fake element that is the same size as the navbar and will serve as a spacer that sits under the navbar. Your next element will then be placed correctly.

Thanks for the info. The navbar is a fixed element. I did set the margin to the size of the navbar, which worked well for the top of the page, but when you hit the navbar and it would go to a different part of the page, then that item would be covered by the navbar.

The [id] is ??? I don’t know, that’s just the way I found this fix some where out there. I just copied and pasted it into my code and it worked. The only id’s have in my code currently are the id’s of where the navbar is jumping too.

Okay, I think * [id] will select any id. I’m not sure, it’s a little tricky, but possibly that will select any item on the page and insert that phantom spacer before it. So no matter where you are on the page, that spacer will always be added and thus the navbar won’t be able to cover it up.

Thanks for the help.