Bootstrap Modal Issues

Weird random stuff is happening on my page. The modal is covering the main navigation menu on the top of my page. I think its a z-index thing ? ?

here is the page:

Click on this to activate the modal.

What I see is a modal that has a background that covers 100% of the screen (which is how it’s supposed to work) unless/until you scroll down far enough to trigger the floating navigation to appear at the top of the screen (which is on a z-index higher than the modal or background.) I only checked it in Firefox, not IE or Chrome.

Is that not what you want??


The modal is located -71% from the top of the page. Once its triggered it pops down. But before it gets triggered it covers some of the top level main menu items, preventing the hover action to work on them.
This happens randomly, but only on the pages that have the modal. I find that if you adjust the browser zoom in and out, this will affect the modal bug.