Navbar going under content

Webdesign Help
1

Hi there,
I am trying to make my navbar not sticky however have it overlap the content that it goes over, to look a bit like this:

image
image990×238 36 KB

However, this issue with this is that the header is now sticky, but when I disable it being sticky, it does this:

image
image996×330 41.7 KB

This wouldn’t be an issue if it overlayed on top of the other content, however, when I add a negative margin (no matter which element it is on - navbar or the content below), it is always put underneath the content, like this:

image
image995×291 38.3 KB

Does anyone know a fix to this, I have been at this for a while now trying to get it to work and I just can’t seem to find the way.

Thanks in advance,
Ben.

2

have you changed the z-index of the contents? could be worth adding z-index:9999999 to the navbar and see if that solves it

4

You can look at the code I used on this site. I think it does what you want.

https://tmapa.com/

5

Thank you all for your replies!

Is anyone able to tell me how to make @kuligaposten one fade in when you scroll, please?

Thanks,
Ben