Với menu cấp 3 trở đi trên theme Flatsome nó tự động chia nhiều cột bao gồm tên trình đơn menu và các sub-menu theo cột của nó, điều này giúp menu được show tất cả cho cảm giác thuận tiện và khoa học.

Nhưng cũng có một số khách hàng sẽ không thích cách hiển thị như vậy, thế nên mình sẽ hướng dẫn cách sửa CSS để menu đa cấp của theme Flatsome hiển thị kiểu vertical menu như bình thường chúng ta hay sử dụng nhé!

Cách thêm rất đơn giản chỉ cần thêm đoạn mã CSS sau vào file style.css của theme Flatsome để sử dụng (Hãy active dùng Flatsome-chill nhé). Hoặc bạn có thể thêm vào Quản trị > Giao diện > Tùy chỉnh > Style > Custom CSS > Custom CSS:

Dưới đây là đoạn mã:

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

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é.

Chúc bạn thành cồng !