Phương pháp chỉnh sửa CSS thực đơn 3 cấp trên theme Flatsome
sở hữu 1 thực tiễn là, menu cấp 2 của Flatsome là kiểu vertical một cột như thường ngày, ko vấn đề gì. Tuy nhiên, menu cấp 3 trở đi thì nó tự động chia đa dạng 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 như vậy cho cảm giác rất gọn ghẽ và khoa học đối với điều kiện phần lớn các trình đơn menu đều mang sub-menu.
Trong bài viết này, mình sẽ hướng dẫn Các bạn 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à làm nó hiển thị kiểu vertical thực đơn như thường nhật chúng ta hay dùng nhé!
Bài viết dựa trên kinh nghiệm và công việc thực tiễn, sử dụng theme Flatsome và WordPress 4.9.8. Vì vậy, bài chỉ dẫn thích hợp 100% cho Các bạn làm web tiêu dùng theme Flatsome. Còn những theme khác thì có vẻ như không hoạt động được!
cách thức 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 toàn bộ đ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ả thực tế sau khi css nhé
cách chỉnh sửa CSS thực đơn 3 cấp trên theme Flatsome
từ đoạn code CSS menu 3 cấp trên theme Flatsome bạn mang thể đổi thay màu nền menu , mày viền thậm chí mày Hover của chuột nhé
nếu như bạn ko khiến được vui lòng commem bên dưới mình sẽ hộ trợ
Chúc bạn thành cồng !
Post a Comment