Navbar don't click until i call my modal in Bootstrap - html

Question

I use Bootstrap (v2.3.2). My navbar is;
<div class="navbar-wrapper">
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<button type="button" class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
</button>
<a class="brand" href="index.jsp">MyPage</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a class="brand" href="index.jsp">Home</a></li>
<li><a class="brand" href="about.html">About</a></li>
<li><a class="brand" href="rm.jsp" >Contact</a></li>
<li class="dropdown"><a class="brand" href="#" class="dropdown-toggle"
data-toggle="dropdown">Menü <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Gallery</li>
<li>Some page</li>
<li>Guest Book</li>
</ul>
</li>
</ul>
<div style="display: inline-block; margin-top:5px ;margin-left:520px;">
</div>
<a target="_blank" href="https://www.facebook.com/groups/bademdere/" class="btn btn-social-icon btn-facebook pull-right">
<i class="fa fa-facebook"></i>
</a>
</div>
</div>
</div>
</div>
</div>
And i have a button on my caraousel like this;
<p>Show on map</p>
,and my modal is ;
<div class="modal fade" id="mapmodals">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myCity">MyPage</h4>
</div>
<div class="modal-body">
<div id="map_canvas" style="width:530px; height:300px"></div>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When website is openning first time,i can't click "ul" or "li" tags. Dropdown menu not opening.But i call my modal and then close it, i can click navbar perfectly.Dropdown menu is opening success.
I try to define modal above the navbar it doesn't change.
How can i solve this problem?
An example is here :http://www.bootply.com/gQZPPqbmcS
Edit: My caraousel code is;
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="img/slide-01.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Wellcome</h1>
<p class="lead">Some text <br> some text</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Loacation</h1>
<p class="lead">Some text.</p>
<!-- Button to trigger modal -->
<p>See on map</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide-03.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1 style="color: #000000;">text</h1>
<p class="lead" style="color: #000000;">Some text</p>
<a class="btn btn-large btn-primary"
href="y.jsp"
target="_blank">text</a>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>

Answer 1

<div class="modal fade hide" id="mapmodals">
</div>
I solved it!! I add my modal's class atribute "hide".