Why is my navbar behind other content?

HTML-CSS
1

I’ve created a navbar that sits on the top of my portfolio website. For some reason, as you scroll down the page it is still fixed but the content is over the top of the navbar.

Has anybody else run into this problem and/or knows the solution?

Any and all help appreciated!!

2 Likes
2

Add this css property:

#nav {
    z-index: 9999;
}
7 Likes
3

Thank you, also when I shorten the window, the content is lost behind the nav, so how would you propose moving the content when the window is smaller, is there a straightforward way of doing this??

4

Yes. The standard way is to hide the content and have a hamburger menu. When the user opens the menu, then the content slides out.

Your navbar does not have any height, this is why your content below is covered. You could add some height to it yourself, but there are other problems. Your first problem is that your navbar is in your container-fluid. Your second problem is that you are applying the styles to the ul element not the navbar itself. (if you want to do that, you can remove #navbar completely and just have #nav). I would suggest trying to copythe navbar from the bootstrap site. Keep in mind, that you need to add the bootstrap scripts. Jquery is required, so make sure you add that script before the bootstrap one.

2 Likes
5

Exactly same here!!! Glad that u already asked it

6

Thanks man, you saved me a lot of troubles.

7

ohmigod 3 years later this tip is still invaluable! Out of the dozen pages I’ve found on Google, this is the only one that worked!!!

1 Like
8

Thanks for you!!! You saved me a lot of problems broo :+1: :+1: :fist: :fist:

9

@IsaacAbrahamson thanks a lot! it did work.