Bootstrap: Semi-transparent navbar overlay on carousel breaks page css -
i trying implement transparent bootstrap navbar overlay onto bootstrap carousel , having bit of issue, can navbar in position want in code provided below, issue breaks page css , content should below slider appears on navbar.
css:
.navbar-wrapper { position:relative; } .carousel { position:absolute; top:60px; } .carousel-inner { width: 100%; overflow: hidden; } .navbar { position:absolute; top:0; z-index:10; background: rgb(0, 0, 0); opacity: 0.85; width:100%; }
as can see navbar html have added navbar class of "navbar" wanted use less code until navigation positioned wanted be, add other lines when page breaking issue fixed. leaving code in or out not change page breaking issue guessing actual css carousel causing issue. html:
<div class="navbar-wrapper"> <div class="navbar"> </div> </div><!-- /navbar-wrapper --> <!-- simple bootstrap carousel --> <div id="carousel-generic" class="carousel slide small-browser-margins reposition-top" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-generic" data-slide-to="1"></li> <li data-target="#carousel-generic" data-slide-to="2"></li> <li data-target="#carousel-generic" data-slide-to="3"></li> </ol> <div class="carousel-inner"> <div class="item active"> <img src="images/image1.jpg" alt="" class="img-responsive"> </div> <div class="item"> <img src="images/image2.jpg" alt="" class="img-responsive"> </div> <div class="item"> <img src="images/image3.jpg" alt="" class="img-responsive"> </div> <div class="item"> <img src="images/image4.jpg" alt="" class="img-responsive"> </div> </div> </div><!-- /#carousel-generic -->
oh dear... cup of tea , @ things , had do, small change css:
.navbar-wrapper { position:relative; } .carousel { top:0; } .carousel-inner { width: 100%; overflow: hidden; } .navbar { position:absolute; top:0; z-index:10; background: rgb(0, 0, 0); opacity: 0.85; width:100%; }
Comments
Post a Comment