Hướng dẫn navbar bootstrap 4 đẹp

Đoạn code trên gọi 3 file js từ thư mục /js trong project của chúng ta, 3 file này mình đã thêm trong bản Demo mà mình để ở dưới cùng bài. Bạn chỉ cần gọi ra thôi, không cần quan tâm lắm tới 3 file trên, nhưng buộc phải có nhé !

– File style.css

Bước 2: Bạn thêm đoạn code Menu này vào sau thẻ

Đây là code html bạn copy vào file /index.html:

Mã:

Bước 3: Thay đổi style của menu ban đầu.

Đây là menu bình thường

Đây là menu ở chế độ xem mobile

Để có được style như trên

Bạn copy đoạn code css sau vào file /css/style.css:

Mã:

.navbar-default {
    background-color: rgba(0, 0, 0, 0.8);
    border-color: #FFF;
}

.navbar-default .navbar-brand {
    color: #FFF;
}

.navbar-default .navbar-brand:hover {
    color: #FFB800;
}

.navbar-default .navbar-nav > .active > a {
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
}

.navbar-default .navbar-nav > li > a {
    color: #999;
}

.dropdown-menu > li > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #FFF;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #e7e7e7;
}

.dropdown-menu {
    background-color: rgba(0, 0, 0, 0.8);
}

.dropdown-menu > li > a:hover {
    color: #555!important;
}

@media (max-width:768px){
    .navbar-default .navbar-nav .open .dropdown-menu> li > a:hover,
    .dropdown-menu > li > a:hover {
        color: #FFF!important;
    }
}

Như vậy chúng ta đã có một Menu Responsive với thư viện Bootstrap – Fixed navbar rất đẹp mắt và tiện lợi, có thể tùy biến theo thiết bị xem của người dùng.

Xem Demo | Donwload Demo

Mọi thông tin hoặc yêu cầu hướng dẫn các bạn hãy đăng tại Cộng Đồng IT để nhận được hướng dẫn nhé !

Chúc các bạn thành công !

• THẺ
• Bloghosting
• Bootstrap
• Như bạn đã hỏi ở trên hôm nay mình sẽ hướng dẫn bạn thực hiện một Menu Responsive với thư viện Bootstrap - Fixed navbar.

Facebook

Twitter

Pinterest

WhatsApp

Nội dung trướcSEO với Google Webmaster Tools

Nội dung tiếp theoThiết kế Website miễn phí, tại sao không ?

Blog Hosting

http://www.bloghosting.vn/

Sự khác biệt giữa Snapshot và Cloud Backup

Tăng tốc khởi động máy tính trên Windows 10

Firmware là gì? Sự khác nhau giữa Firmware và Software

ĐĂNG BÌNH LUẬN

Please enter your comment!

Please enter your name here

You have entered an incorrect email address!

Please enter your email address here

Save my name, email, and website in this browser for the next time I comment.

Bình luận nhiều

TĂNG VIEW YOUTUBE VỚI MYTUBE BOT

28.03.2018

Nhân Hoà Nhân đôi thời hạn sử dụng Cloud VPS

01.04.2017

Repair database WordPress bằng wp-config.php

16.12.2016

Săn Voucher giảm 95% dịch vụ Cloud Server tại DIGISTAR

15.08.2018

SEO với Google Webmaster Tools

01.11.2014

Quảng cáo

Nên xem

DigiStar tặng tên miền và khuyến mãi hosting tháng 11

Blog Hosting - 26.11.2012

Quý khách hàng thân mến! Lời đầu tiên, DIGISTAR xin được gửi đến toàn thể quý thầy cô lời tri ân, lời chúc tốt đẹp...