I am currently integrating MapBox.js into a Bootstrap 3 website. The main concept is to utilize a map as the background for a row that occupies the full width of the site, with html-content displayed on top. To ensure MapBox.js remains in the background, I have given it a z-value of -1.
The issue arises with the fixed navbar not functioning correctly in Chrome anymore. The links are unresponsive to hovering and appear to scroll behind the MapBox, even though the navbar has a z-value of 1030. I attempted to increase the z-value using the following method, but nothing seems to resolve the problem:
navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 999999;
}
You can find the mapbox-css link here:
Do you have any suggestions on how to tackle this issue?
Below is the code snippets:
HTML
<div class="row"> Other Section</div>
<!-- Map Start -->
<div class="row" >
<div id="map"></div>
<div class="container" id="section1-container">
<div class="col-xs-12 col-sm-12 col-md-12">
<br />
<br />
<h1 class="text-center">Ipusm Lorum.</h1>
<br />
<br />
</div>
<div class="row text-center">
<div class="col-xs-12 col-md-4">
<address>
<strong><abbr title="Telefono">T:</abbr> 777777777</strong
</address>
</div>
<div class="col-xs-12 col-md-4">
<address>
<strong><abbr title="Mail">M:</abbr> <a href="mailto:#"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cea7a0a8a18eabafa3bea2abe0ada1a3">[email protected]</a></a></strong
</address>
</div>
<div class="col-xs-12 col-md-4">
<address>
<strong><abbr title="Dirrecion">D:</abbr> any street</strong
</address>
</div>
<br />
<br />
<br />
<br />
</div>
</div>
<!-- Map End -->
</div>
CSS
#section1-container {
position:relative;
z-index: 1;
}
#map {
position:absolute;
width:100%;
z-index: -1;
height: 500px;
}
JavaScript
<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.2/mapbox.js"></script>
<script>
var map = L.mapbox.map('map', 'examples.map-9ijuk24y', {
scrollWheelZoom: false,
zoomControl: false})
.setView([40, -74.50], 9);
</script>