Bootstrap Modal Overlaps Menu

Question

I just attached a bootstrap modal to a button on a Wordpress site, and it's working great.

But the problem is, the modal hides the navigation menu (specifically the "blog" link) when it's inactive, the first time. After you open the modal and close it out, the modal disappears and the menu works fine.

I've tried a few things, like fiddling with the z-index, and also I tried hacking a script together:

<script>
jQuery(document).ready(function() {
  jQuery('#subscribe').modal('hide') 
});
</script>

So far, no dice. But maybe you can tell from the script, I'd just like to put the modal on hidden state when the page loads, and only have it called when they click the button.

Here's my site. If you try clicking on the "blog" link on a laptop or smaller screen, you can't, because it's hidden by the modal:

http://jackalopemedia.com/jasontreu

Appreciate any help!

Answer 1

Ok I found the solution

You must add a class called hide. Because fade function is to set opacity:0 of the div. So its just hide in-front of the page.

So your line should be

<div id="subscribe" class="modal hide fade" role="dialog">

For more details visit bootstrap