1

I'm currently including bootstrap in my project with bootstrapcdn.com and have a seperate file that handles all my custom CSS. For some reason I'm having issues choosing when the navigation bar will collapse. It currently collapses at 766px wide, but need it to collapse at 1280px wide (standard window size). Any idea what I should place in my custom css file?

Dondada
  • 421
  • 9
  • 25

1 Answers1

1

A CSS solution using media queries would be something like this..

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

Bootply

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • I tried this. Don't think it's overriding bootstrap's default css. – Dondada Dec 05 '13 at 15:22
  • Since the default collapse point it 768px.. you're right it's not overriding it.. but will achieve what you want by getting the nav to collapse sooner at 1280px – Carol Skelly Dec 05 '13 at 15:32
  • It wont collapse at 1280px though. Only 768px. Even with the CSS you posted. – Dondada Dec 05 '13 at 15:37
  • It does for me.. Open http://bootply.com/render/98488 and resize your browser. Watch the "current viewport width" and the collapsed nav. – Carol Skelly Dec 05 '13 at 15:41
  • It didn't work because I had the custom css stated before the bootstrapcdn. Thank you for your answer. Works like a charm! – Dondada Dec 05 '13 at 16:25