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

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi admin, 5/5/17.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    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.

    menu-bootstrap-thu-gon.png

    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
     
    Cảm ơn đã xem bài:

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

    Chỉnh sửa cuối: 5/5/17
  2. dinhngoclam113
    Tham gia ngày:
    27/12/16
    Bài viết:
    13
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Em có một lỗi nhỏ là hái menu giật 3 cấp của em thế quái nào cấp thứ 3 nó lại ăn vào cỡ chứ của nội dung, khi chỉnh font chữ của nó là nó chỉnh luôn menu cấp 3 của mình làm vỡ tùm lum. file CSS thì khó chỉnh quá.
     
  3. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,878
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn chụp hình và đưa link web mình xem cho bạn nhé.
     


Chủ để tương tự : Thay đổi
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi màu sắc Placeholder CSS thẻ Input HTML 25/9/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Sự thay đổi cách sử dụng trong html, thay đổi và tối ưu các thẻ trong html 17/2/14
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi icon trước thẻ tag <li> của <ul thành đấu check v xanh CSS HTML như thế nào? 21/7/22
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc icon .svg trong background image css html, change svg color in background image 23/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi màu sắc Input placeholder CSS HTML 5, Change Color Placeholder như thế nào 20/1/21