Css bổ sung cho vertical menu flatsome

10/04/2023 12:44 326

Table of Contents

Tại sao phải css?

Vertical menu flatsome là chức năng giúp chúng ta tạo nhanh menu danh mục sản phẩm nhiều cấp, tuy nhiên nhược điểm là css nó chưa được ok trong bài viết này mình xin để lại đoạn code mà mình đã css cho khách hàng để anh chị e xài nha, sau khi áp dụng đoạn css giao diện sẽ như hình bên dưới

Đoạn code css

anh chị lưu ý đoạn code này chỉ áp dụng cho theme flatsome và cho cái menu còn cái button danh mục sản phẩm là mình chỉnh trong admin

.ux-nav-vertical-menu>li>ul>li {
    text-align: left;
    display: block !important;
    white-space: normal !important;
    width: 100% !important;
    min-width: initial !important;
    float: left;
    position: relative;
}

.ux-nav-vertical-menu>li>ul {
    width: 14em;
    padding: 0;
}

.ux-nav-vertical-menu>li>ul>li>ul {
    position: absolute;
    left: 16em;
    background: #fff;
    width: 14em;
    top: -1px;
    display: none;
}

.ux-nav-vertical-menu>li>a {
    font-size: 12px;
}

.ux-nav-vertical-menu>li>ul>li:hover>ul {
    display: block;
}



.ux-nav-vertical-menu>li>ul>li>a {
    font-size: 12px !important;
    font-weight: 400 !important;
    text-transform: capitalize !important;
}

.ux-nav-vertical-menu>li>ul>li>ul>li>a {
    font-size: 12px;
    text-transform: capitalize;
}

.ux-nav-vertical-menu>li>a {
    font-size: 12px !important;
    text-transform: capitalize;
}

.ux-nav-vertical-menu>li>ul>li.menu-item-has-children {
    position: relative;
}

.ux-nav-vertical-menu>li>ul>li.menu-item-has-children:after {
    content:"\f105";
    font-family: FontAwesome;
    position:absolute;
    top:0;
    right:5px;
}

.ux-nav-vertical-menu>li>ul>li {

text-align: left;

display: block !important;

white-space: normal !important;

width: 100% !important;

min-width: initial !important;

float: left;

position: relative;

}

.ux-nav-vertical-menu>li>ul {

width: 14em;

padding: 0;

}

.ux-nav-vertical-menu>li>ul>li>ul {

position: absolute;

left: 16em;

background: #fff;

width: 14em;

top: -1px;

display: none;

}

.ux-nav-vertical-menu>li>a {

font-size: 12px;

}

.ux-nav-vertical-menu>li>ul>li:hover>ul {

display: block;

}

.ux-nav-vertical-menu>li>ul>li>a {

font-size: 12px !important;

font-weight: 400 !important;

text-transform: capitalize !important;

}

.ux-nav-vertical-menu>li>ul>li>ul>li>a {

font-size: 12px;

text-transform: capitalize;

}

.ux-nav-vertical-menu>li>a {

font-size: 12px !important;

text-transform: capitalize;

}

.ux-nav-vertical-menu>li>ul>li.menu-item-has-children {

position: relative;

}

.ux-nav-vertical-menu>li>ul>li.menu-item-has-children:after {

content:"\f105";

font-family: FontAwesome;

position:absolute;

top:0;

right:5px;

}

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Thêm breadcrumb cho flatsome [ 11/10/2021 07:53 ]
Thêm hotline bên trái trong flatsome [ 06/10/2021 02:02 ]
Thêm nút add to cart và mua ngay hiện khi scroll xuống dưới cho flatsome [ 25/08/2020 09:10 ]
Css mũi tên cho nút on sale trong flatsome [ 25/08/2020 02:44 ]
Thêm custom hook vào flatsome (add custom hook into flatsome) [ 21/08/2020 07:23 ]

Css bổ sung cho vertical menu flatsome

Tại sao phải css?

Đoạn code css

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)