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;     } } 

fiddle


Comments

Popular posts from this blog

c# - DetailsView in ASP.Net - How to add another column on the side/add a control in each row? -

javascript - firefox memory leak -

Trying to import CSV file to a SQL Server database using asp.net and c# - can't find what I'm missing -