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
Cộng Đồng IT
- Home
- Themes
-
Plugins
- Plugins 1
- Plugins 2
- Plugins 3
- Tools
- Donate
- Contact
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
//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...