Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap

Thay đổi kích thước co lại responsive trên mobi của menu bootstrap.

Mặc định menu của bootstrap chiều rộng trình duyệt giảm xuống dưới 768px, thanh điều hướng sẽ thay đổi thành chế độ thu gọn. Để thay đổi kích thước co lại của thanh menu lớn nhỏ theo ý thì các bạn làm như dưới tùy theo phiên bản bootstrap bạn đang sử dụng.

​

1. Với phiên bản Bootstrap 3.3.x ... ta copy đoạn code dán vào header hoặc tìm tới bootstrap để thay thế thuộc tính 1000px thành chiều rộng muốn co lại trên mobi.

Mã:

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

2. Với phiên bản Bootstrap 4 cập nhật năm 2017 thì không cần thêm code vào mà chỉ cần chỉnh lại ở thẻ nav như sau:

Mã:

<nav class="navbar navbar-toggleable-sm">..</nav>

Tương ứng với:

• navbar-toggleable = Menu trên mobi xs màn hình có kích thước<576px
• navbar-toggleable-sm = Menu trên mobi sm màn hình có kích thước <768px
• navbar-toggleable-md = Menu trên mobi md màn hình có kích thước <992px
• navbar-toggleable-lg = Menu trên mobi lg màn hình có kích thước <1200px
• navbar-toggleable-xl = Không sử dụng menu trên mobi