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

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    497
    Đã được thích:
    29
    Điểm thành tích:
    28
    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

    danh sách diễn đàn rao vặt gov chất lượng
    Last edited by a moderator: 27/9/18
  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,236
    Đã được thích:
    936
    Đ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

    numbencore89hd Thành Viên Mới

    Tham gia ngày:
    26/9/18
    Bài viết:
    11
    Đã được thích:
    0
    Điểm thành tích:
    1
    Giới tính:
    Nam
    code này hữu ích đấy !
     
  4. seolagi

    seolagi

    Vip Member

    Tham gia ngày:
    16/4/14
    Bài viết:
    497
    Đã được thích:
    29
    Điểm thành tích:
    28
    Cảm ơn ad thêm navbar-fixed-top rất tốt.
     
  5. cuongnguyen207

    cuongnguyen207 Thành Viên Mới

    Tham gia ngày:
    20/9/18
    Bài viết:
    17
    Đã đượ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

    thanhnt51997 Thành Viên Mới

    Tham gia ngày:
    28/9/18
    Bài viết:
    2
    Đã đượ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
     


Chủ để tương tự : Fixed Menu
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Đổi từ click sang hover trong Menu Navigation Dropdown Bootstrap 13/8/18
Ngôn ngữ lập trình CSS, HTML, HTML5 Thay đổi menu navbar collapse chế độ thu gọn trên mobi bootstrap 5/5/17

Like và Share ủng hộ ITSEOVN