CODEWITHSUNDEEP
csstwitter-bootstrapnav
David
David

Reputation: 1963

Bootstrap 3 - navbar collapsible until 990px

I've got this problem. Bootstrap 3 framework changes my navbar into collapsible version (mobile version) when it reaches 767px screen wide. I would like to change it that mobile version exists until 991px. I've seen a similar question but the correct answer is unusable for me. It says that it can be set up while downloading custom version of Bootstrap, putting required value for collapsible navbar. The problem is, I use it with Drupal 7 and the Bootstrap version is provided autamtically form this url: netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.css.

So I have to override this value in my custom css file, but I've know idea what to change - I believe there are many of classes to change. By the way, it might be important, I don't use LESS version.

Regards, David

Upvotes: 1

Views: 6109

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362390

You can override it like this..

@media (max-width: 990px) {
    .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;
    }
}

Demo: http://bootply.com/105915

Upvotes: 5

Related Questions