CODEWITHSUNDEEP
csstwitter-bootstrap
Morpheus
Morpheus

Reputation: 9055

bootstrap - stack horizontal menu

I have created menu with collapsable class .nav-collapse in bootstrap. When I resize window it disappears. So I've overrided .nav-collapse class with this css:

.nav-collapse, .nav-collapse.collapse {
    height: auto;
    overflow: visible;
}

This is not the desired way of doing it everytime. Take a look at this jsfiddle and remove above style from css. It will be easier to understand.

QUESTION: Is there a simple built in solution for stacking horizontal menu in bootstrap?

Upvotes: 0

Views: 11264

Answers (2)

Dan
Dan

Reputation: 425

Bootstrap does have built in stacking : http://twitter.github.io/bootstrap/components.html#navs

This would be the correct layout for .nav-collapse in your 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 what I would do is override the default media query from bootstrap-responsive.css in a separate bootstrap-overrides.css:

@media (max-width: 979px) {
    .top-nav .nav-collapse, .top-nav .nav-collapse.collapse {
        height: auto;
        overflow: visible;
    }
}

fiddle

Upvotes: 3

Nobal Mohan
Nobal Mohan

Reputation: 486

If you use "nav" class, during resize it will be turned into buttons. Your request can be achieved by using "nav-stacked" class.Look at this example http://twitter.github.io/bootstrap/components.html#navs -> Stackable

Upvotes: 0

Related Questions