Bước 1: Thêm CSS và tùy chỉnh CSS (Custom CSS) của theme Flatsome
Bạn copy toàn bộ code CSS bên dưới vào mục tùy chỉnh theme Flatsome. Có nhiều cách để bạn thêm nhé, bạn tham khảo một trong 3 cách này để thêm
1. Flatsome -> Advanced -> Custom CSS -> Dán code CSS vào khung “ALL SCREENS”.
2. Giao diện > Tùy chỉnh > Style > Custom CSS > Dán code CSS vào khung Custom CSS.
3. Giao diện > Tùy chỉnh > Additional CSS, rồi dán code CSS vào đây.
|
.nav-dropdown>li.nav-dropdown-col{display:block}
.nav-dropdown{border:1px solid #ddd; padding:0}
.nav-dropdown .nav-dropdown-col>a, .nav-dropdown li a{font-weight:normal !important; text-transform:none !important;font-size:15px; font-weight:500}
.nav-dropdown .nav-dropdown-col>ul li:hover{background:#db0000}
.nav-dropdown-default>li:hover>a, .nav-dropdown .nav-dropdown-col>ul li:hover>a{color:white}
.nav-dropdown-default>li:hover{background:#fbae3c}
.nav-dropdown-default>li>a{border-bottom:0 !important}.nav-dropdown-has-arrow li.has-dropdown:before{border-width: 10px;
margin-left: -10px;}
.nav-dropdown .nav-dropdown-col>ul{border: 1px solid #d2d2d2;margin-top:-40px;box-shadow: 2px 2px 5px #828282;display:none;position: absolute;
left: 100%;z-index: 9;background: white;min-width: 240px;}
.nav-dropdown>li.nav-dropdown-col{width:100%;border-right:0}
.nav-dropdown .nav-dropdown-col>ul li a{padding:10px; text-transform: none;color:black}
.header-nav li.nav-dropdown-col:hover >ul{display:block !important}
.active>ul.children, .active>ul.sub-menu:not(.nav-dropdown) {
display: none !important;
}
|
Lưu lại và ta sẽ có kết quả như hình nha.
Bước 2: Chỉnh màu Nền (Background) cho phù hợp
Cần biết một tý kiến thức về CSS để có thể tùy biến đoạn code lại theo ý của bạn. Nhưng dưới là 2 chỗ mà bạn có thể thay đổi mã màu để phù hợp với thương hiệu của bạn nha.
.nav-dropdown .nav-dropdown-col>ul li:hover{background:#db0000}
-> #db0000: Màu hiển thị menu cấp 3 (là cái màu nền Menu cấp 3 khi mình rê chuột vào đó). Code này là ở dòng 4 nha.
.nav-dropdown-default>li:hover{background:#fbae3c}
-> #fbae3c: Màu hiển thị menu cấp 2 (là cái màu nền Menu cấp 2 khi mình rê chuột vào đó). Code này là ở dòng 6 nha.
Nguồn: Ngọc Nguyễn
