Fixed Menu top navbar in bootstrap, cố định menu khi scrolling kéo xuống dưới

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

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Mình có cái Menu giờ mình muốn Fixed Menu top navbar in bootstrap, cố định menu khi scrolling kéo xuống dưới, kéo chuột xuống dưới thì thanh menu tự động cố định ở trên top, hoặc footer tùy theo ý của mình thì làm như thế nào?

    Mình tìm trên mạng thấy họ gắn javascript vào để bắt sự kiện scrolling nhưng mình muốn dùng css thôi, không dùng csroll được không? và cách làm như thế nào giúp mình với.

    Menu khi kéo xuống dưới nó cố định, fixed trên đầu web, top web ý.

    Menu của mình bằng hình ảnh đây:

    fixed-top-navbar-in-bootstrap.jpg

    Code HTML của menu của mình

    Mã:
    <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <a href="/"><img class="cs-imglogo" alt="logo" src="~/images/logo.png" /></a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="cs-dot-menu">MENU</span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" >
                <li><a href="#">Rút hầm cầu</a></li>
                <li><a href="#" >Thông cầu cống nghẹt</a></li>
                <li><a href="#">Nạo vét hố ga</a></li>
                <li><a href="#">Báo giá rút hầm cầu</a></li>
                <li><a href="#" >Hồ sơ năng lực</a></li>
               <li><a href="#">Tư vấn</a></li>
               <li><a href="#" >Liên hệ</a></li>
            </ul>
        </div>
    </nav>
    
     
    Cảm ơn đã xem bài:

    Fixed Menu top navbar in bootstrap, cố định menu khi scrolling kéo xuống dưới

    Last edited by a moderator: 27/9/18
  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Bạn có thể tham khảo tại link sau: getbootstrap.com/docs/3.3/examples/navbar-fixed-top/

    Hoặc Bước 1 thêm navbar-fixed-top vào nav của bạn.
    Mã:
    <nav class="navbar navbar-inverse navbar-fixed-top">
    .....
    </nav>
    
    Và thêm vào file css của web thuộc tính body như sau: (Tùy vào nav bao nhiêu mà bạn tùy biến padding-top bấy nhiêu)
    Mã:
    body { padding-top: 70px; }
     
    Chỉnh sửa cuối: 27/9/18
  3. numbencore89hd
    Tham gia ngày:
    26/9/18
    Bài viết:
    9
    Đã được thích:
    0
    Điểm thành tích:
    6
    Giới tính:
    Nam
    code này hữu ích đấy !
     
  4. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad thêm navbar-fixed-top rất tốt.
     
  5. cuongnguyen207
    Tham gia ngày:
    20/9/18
    Bài viết:
    15
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    Cảm ơn bạn, code này rất tốt ạ.
    Ngoài ra nếu xài theme wordpress thì thường được hỗ trợ sẵn nên cũng khỏe
     
  6. thanhnt51997
    Tham gia ngày:
    28/9/18
    Bài viết:
    1
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    tks b!! code hay và rất dễ hiểu
     
  7. hoangyenhup
    Tham gia ngày:
    4/7/19
    Bài viết:
    18
    Đã được thích:
    1
    Điểm thành tích:
    3
    Giới tính:
    Nữ
    Thông tin hữu ích , mình sẽ cố găng thêm hihi