Code tùy chỉnh menu cấp 3 cho theme Flatsome

Hiện nay bản 14.x của Flatsome đã có tích hợp menu cấp 3 nhưng nó vẫn chưa được đẹp thậm chí là làm xấu đi phần menu của website.

Mình sẽ hướng dẫn các bạn Code tùy chỉnh menu cấp 3 cho theme Flatsome chỉnh sửa CSS menu 3 cấp của theme Flatsome có thể hiển thị đẹp hơn.

Dưới đây mình chia sẻ cho bạn Code tùy chỉnh menu cấp 3 cho theme Flatsome 

Đầu tiên bạn vào Tùy Biến => Custom Css và dán đoạn code này vào nhé!

.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;
}

Kết quả cuối cùng sau khi bạn sử dụng code tùy chỉnh menu cấp 3 cho theme Flatsome là đây:

Chúc các bạn thành công!