How to change Bootstrap navbar collapse breakpoint

Bootstrap 5 (update 2023)

As stated in the docs,

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

---

Bootstrap 4 (update 2018)

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

• navbar-expand-sm = mobile menu on xs screens <576px
• navbar-expand-md = mobile menu on sm screens <768px
• navbar-expand-lg = mobile menu on md screens <992px
• navbar-expand-xl = mobile menu on lg screens <1200px
• navbar-expand = never use mobile menu
• (no expand class) = always use mobile menu

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 Example

You can also use a custom breakpoint (???px) by adding a little CSS. For example, here’s 1300px..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples

---

Bootstrap 3

For Bootstrap 3.3.x, here is the working CSS to override the navbar breakpoint. Change 991px to the pixel dimension of the point at which you want the navbar to collapse…

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

Working example for 991px: https://codeply.com/p/GxWMLj14VJ
Working example for 1200px: https://codeply.com/go/VsYaOLzfb4 (with search form)

Note: The above works for anything over 768px. If you need to change it to less than 768px the example of less than 768px is here.

---