How Can I Override the Bootstrap Navbar Collapse Breakpoint?

Overriding the Bootstrap Navbar Collapse Breakpoint

Certain scenarios call for modifying the default collapse breakpoint of Bootstrap's navbar, set to 768px. This guide investigates alternative methods for altering this behavior without resorting to LESS.

Bootstrap 5 (2023 Update)

Bootstrap 5 introduces a simplified approach. Simply add the .navbar-expand class to the navbar for a fixed (never collapsing) navigation bar. For a permanently collapsed navbar, omit the class altogether.

Bootstrap 4 (2018 Update)

Bootstrap 4 enhances navbar breakpoint control with the introduction of .navbar-expand-* classes:

• .navbar-expand-sm: Mobile menu at screen widths less than 576px
• .navbar-expand-md: Mobile menu at screen widths less than 768px
• .navbar-expand-lg: Mobile menu at screen widths less than 992px
• .navbar-expand-xl: Mobile menu at screen widths less than 1200px
• .navbar-expand: Fixed navbar, never collapsing
• (No expand class): Always display mobile menu

Alternatively, you can define a custom breakpoint:

@media (min-width: 1300px) {
  .navbar-expand-custom {
    flex-direction: row;
    ...
  }
}

Bootstrap 3

For Bootstrap 3.3.x, you can override the breakpoint using the following CSS:

@media (max-width: 991px) {
  .navbar-header {
    float: none;
  }
  ...
}

The above is the detailed content of How Can I Override the Bootstrap Navbar Collapse Breakpoint?. For more information, please follow other related articles on the PHP Chinese website!