CODEWITHSUNDEEP
twitter-bootstrapmenu
user3378766
user3378766

Reputation: 1

Bootstrap responsive menu width

I want to make bootstrap navigation to appear the collapse button at max-width: 1140px instead at 768px (default).

Thank you!

Upvotes: 0

Views: 160

Answers (3)

Kieran Ryan
Kieran Ryan

Reputation: 591

so using integral's tip you should insert following into your local style files, which should override the supplied bootstrap styling rules:

@media (max-width: 1140px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Upvotes: 0

Omar
Omar

Reputation: 3040

add this to your style sheet 

                        @media screen and (min-width: 768px) and (max-width: 1140px) {
                                .navbar-header {
                                    float: none;
                                }

                                .navbar-toggle {
                                    display: block;
                                }

                        }

Remove this part from bootstrap.css and add it as it appear below to your style sheet 

                        @media (min-width: 1140px){
                            .navbar-collapse.collapse {
                                display: block!important;
                                height: auto!important;
                                padding-bottom: 0;
                                overflow: visible!important;
                            }

                        }

Upvotes: 0

integral
integral

Reputation: 395

there is an example of that for 950px; at http://www.bootply.com/105174, just change the values

Upvotes: 1

Related Questions