James B James B - 3 years ago 66
CSS Question

Bootstrap Affixed nav bar w/ parallax scrolling problems

Essentially my website has multiple parallax scrolling panels, so basically a picture embedded within a div element, and splitting between two of those panels, I have a navbar which I want to affix to the top of the screen... now I have that completed but the navbar isn't on the top most layer and all the other divs on the screen go on top of that, there is a "demo" or my site which you can see this actively happening. I'm not sure how to either move the rest of the elements down without messing up the parallax or bringing the z value of the navbar up above all other elements... Any help would greatly be appreciated!

(I've had this problem on other sites before I've created and I've never been able to figure it out)

My Website (Github.io) / demo

Answer Source

You can use the CSS z-index property to achieve what you're looking for.

Simply add a high z-index property value to the navbar selector, like as follows

.affix {
    // pre-existing properties
    z-index: 999;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download