Change Bootstrap Navbar Collapse Breakpoint Without Using Less

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

Bootstrap - Change breakpoint navbar?

Bootstrap 5.0

Bootstrap 5 still uses the navbar-expand* classes to determine the Navbar's collapse breakpoint. There is now an additional navbar-expand-xxl class.

Bootstrap 5 - Navbar Tiers

Bootstrap 4.0.0

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes. If you exclude navbar-expand-* the mobile menu will be used at all widths. Here's a demo of all 6 navbar states: Bootstrap 4 - Navbar Tiers

Also see:
Change bootstrap navbar collapse breakpoint without using LESS

Change Navbar breakpoint in Bootstrap 3.3.2

Which version of bootstrap are you using? 3.1? Anyway, I need as well your css to help you to fix it, but generally:

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}

The max width is the breakpoint. Copied from Bootply (with demo included there).

Change boostrap navbar collapse breakpoint

According to Bootstrap 3 Navbar Collapse

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Just change 991px by 1199px for md sizes.

My bootstrap navbar collapse breakpoint wont change

Hey i got it to work with adding .navigatsioon everywhere

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

---

Related Topics