Iframe video covering fixed navbar?

Hi!
I’m working on the landing page project, and I’ve added the fixed nav bar. I just put in some code to make the video responsive, but now the video covers my navbar. How do I fix this? Any help would be appreciated!
My code: https://codepen.io/kianaml/pen/VRwQzV?editors=1100
Thanks in advance!

use the z-index property. Raise the z-index of your fixed nav to be higher than the iframe’s.

.your-navs-class {
z-index:9999999;
}

Start with something like that to see if z-index does the trick, and then you can lower that number to a more reasonable thing, like, 2, or 10. (keeping your z-indexes in order becomes important when multiple elements start stacking, if you leave it at 999999999 and then later try to deploy a light-box on the site, or some sort of fixed module, you’ll have to keep using more and more ridiculous integers.

Looks like in your specific case I’d raise the z-index of the header itself.

1 Like