html - Can't make the bootstrap collapsed nav fixed -
i need 2 navs in website: 1 fixed, other show-hide on click. when click show de first nav, can't above second nav , did it. when scroll , click show first nav, can't fixed, , not working position:fixed.
i'm using bootstrap collapse (http://www.w3schools.com/bootstrap/bootstrap_collapse.asp)
i need first nav fixed when scroll.
obs: sorry if english not perfect =p
https://jsfiddle.net/8o8hr8qb/1/
.panel { width: 100%; z-index: 999; background: #000; border: none; border-radius: 0; color: #fff; margin-bottom: 0; top: 0} .teste-menu { width: 100%; background: #ccc; position: fixed; z-index: 99; top: auto;} .collapse.menu-visivel { display: block; visibility: visible;} .btn-info { float: right; right: 45px; border-radius: 0; background: #000; border-color: #000; position: fixed; z-index: 999;} <div class="panel panel-default"> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body">this nav need fixed</div> </div> <a data-toggle="collapse" href="#collapse1"> <button type="button" class="btn btn-info">▲</button> </a> </div> <div class="panel panel-default teste-menu"> <div id="collapse1" class="panel-collapse collapse menu-visivel"> <div class="panel-body">fixed nav menu</div> </div> </div>
your fixed nav menu must inside same container expand height
<div id="container" class="panel panel-default"> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body">this nav need fixed</div> </div> <a data-toggle="collapse" href="#collapse1"> <button type="button" class="btn btn-info">▲</button> </a> <div class="panel panel-default teste-menu"> <div id="collapse1" class="panel-collapse collapse menu-visivel"> <div class="panel-body">fixed nav menu</div> </div> </div> </div>
then need fix container
#container{position: fixed; top:0;height: auto;}
Comments
Post a Comment