css - bootstrap - stack horizontal menu -
i have created menu collapsable class .nav-collapse
in bootstrap. when resize window disappears. i've overrided .nav-collapse
class css:
.nav-collapse, .nav-collapse.collapse { height: auto; overflow: visible; }
this not desired way of doing everytime. take @ jsfiddle , remove above style css. easier understand.
question: there simple built in solution stacking horizontal menu in bootstrap?
bootstrap have built in stacking : http://twitter.github.io/bootstrap/components.html#navs
this correct layout .nav-collapse
in situation:
<div class="top-nav"> <div class="container-fluid"> <div class="nav-collapse collapse"> <ul class="nav nav-tabs"> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> </ul> </div><!--/.nav-collapse --> </div> </div>
then override default media query bootstrap-responsive.css
in separate bootstrap-overrides.css
:
@media (max-width: 979px) { .top-nav .nav-collapse, .top-nav .nav-collapse.collapse { height: auto; overflow: visible; } }
Comments
Post a Comment