How do I get the navigation to collapse att predefined size into the small icon for mobile devices?

Question

based on How do I get the navigation to collapse into the small icon for mobile devices? i want to let the navigation collapse, but not at the 970px size but rather at a predefined size - let's say 300px. is it possible within bootstrap or do i have to tweek it myself?

my current code:

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <button type="button" class="btn btn-navbar" data-toggle="collapse"
                    data-target=".nav-collapse">
                    <span class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="brand" href="/">name</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li><a href="#about">About</a></li>
                        <li><a href="#price">Price</a></li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>

do you want it fixed at 970px ? and only be responsive at 300px — Shail, Mar 02 '13 at 13:15
@Shail yes, i want i to be fixed when the width of the browser is >300px; otherwise i want it to collapse — ulkas, Mar 02 '13 at 13:25

score 1 · Answer 1 · answered Mar 02 '13 at 13:24

1

YOu can go to customize bootstrap at http://twitter.github.com/bootstrap/customize.html and than deselect the responsive feature you dont need from The Responsive section .

Than write media queries if necessary to arrange stuff .Also you can set min-width to an element to stop it from resizing .

answered Mar 02 '13 at 13:24

Shail

3,639
1
18
29

@ulkas you dont have to manually delete ... thats wat I was suggesting .. anyway . – Shail Mar 02 '13 at 14:05

score 0 · Accepted Answer · answered Mar 02 '13 at 13:15

0

Adjust the media queries within the CSS. Locate the media query that is forcing the collapse, cut it and create your own query with 300px. Like:

@media (max-width: 300px) {
.nav-collapse {
-webkit-transform: translate3d(0, 0, 0);
}

answered Mar 02 '13 at 13:15

bntrns

454
1
8
16

there are seferal `@media` queries, although only one with `translate3d`. changing this part had no effect at all. any clue where to make changes in the general `bootstrap-responsive.css` file? – ulkas Mar 02 '13 at 13:46
1

found it: i had to delete all `.nav-collapse` definition within all other @media, such as `@media (max-width: 979px)`, too. than the easiest way was to go custom like @Shail above said and generate my own collapse part – ulkas Mar 02 '13 at 14:03

How do I get the navigation to collapse att predefined size into the small icon for mobile devices?

2 Answers2