có một thực tiễn là, thực đơn cấp 2 của Flatsome là kiểu vertical một cột như thường nhật, không vấn đề gì. Không những thế, menu cấp 3 trở đi thì nó tự động chia nhiều cột bao gồm tên trình đơn menu và những sub-menu theo cột của nó. Việc chia cột tương tự cho cảm giác rất gọn gàng và khoa học đối mang điều kiện rất nhiều các trình đơn menu đều với sub-menu.
Trong bài viết này, mình sẽ hướng dẫn Cả nhà sửa CSS để thực đơn đa cấp của theme Flatsome sở hữu thể hiển thị đẹp hơn, hoặc căn bản là khiến nó hiển thị kiểu vertical thực đơn như thường ngày chúng ta hay sử dụng nhé!
Bài viết dựa trên kinh nghiệm và công tác thực tại, tiêu dùng theme Flatsome và WordPress 4.9.8. Bởi vậy, bài chỉ dẫn thích hợp 100% cho Anh chị em làm cho web dùng theme Flatsome. Còn các theme khác thì mang vẻ như thường hoạt động được!
bí quyết chỉnh sửa CSS menu 3 cấp trên theme Flatsome
Bước 1: Thêm CSS vào tùy chỉnh CSS của theme – CSS thực đơn 3 cấp trên theme Flatsome
Copy phần nhiều đoạn code CSS sau vào phần tùy chỉnh CSS của theme. Quản trị > Giao diện > Tùy chỉnh > Style > Custom CSS > Custom CSS:
|
1
hai
3
4
5
6
7
8
9
10
11
12
13
|
.nav-dropdown>li.nav-dropdown-coldisplay:block
.nav-dropdownborder:1px solid #ddd; padding:0
.nav-dropdown .nav-dropdown-col>a, .nav-dropdown li afont-weight:normal !important; text-transform:none !important;font-size:15px; font-weight:500
.nav-dropdown .nav-dropdown-col>ul li:hoverbackground:#db0000
.nav-dropdown-default>li:hover>a, .nav-dropdown .nav-dropdown-col>ul li:hover>acolor:white
.nav-dropdown-default>li:hoverbackground:#fbae3c
.nav-dropdown-default>li>aborder-bottom:0 !important.nav-dropdown-has-arrow li.has-dropdown:beforeborder-width: 10px;
margin-left: -10px;
.nav-dropdown .nav-dropdown-col>ulborder: 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-colwidth:100%;border-right:0
.nav-dropdown .nav-dropdown-col>ul li apadding:10px; text-transform: none;color:black
.header-nav li.nav-dropdown-col:hover >uldisplay:block !important
|
bạn chỉ cần lưu lại và xem kết quả nhé và đây là kết quả tình tế sau lúc css nhé
phương pháp chỉnh sửa CSS thực đơn 3 cấp trên theme Flatsome
trong khoảng đoạn code CSS menu 3 cấp trên theme Flatsome bạn mang thể đổi thay màu nền thực đơn , mày viền thậm chí mày Hover của chuột nhé
ví như bạn không làm cho được vui lòng commem bên dưới mình sẽ hộ trợ
Chúc bạn thành cồng !