Menu cấp 2 của Flatsome hiện đang là vertical 1 cột. Nhưng khi bạn tạo thêm một sub-menu cho menu cấp 2 thì Flatsome sẽ tự động chuyển sang menu mega. Điều này tạo cho bạn một cách phân menu khoa học hơn, rõ ràng hơn.
Nhưng đó là khi menu nào cũng có sub-menu, còn không có sub-menu thì thật là kì. Và đặc biệt hơn bạn cần đổi từ MegaMenu sang Dropdown Menu 3 cấp thì làm sao. Hôm nay mình sẽ hướng dẫn bạn làm.
Bước 1: Copy đoạn css bên dưới vào customize css hoặc vào file css child theme Flatsome
.nav-dropdown>li.nav-dropdown-col{display:block}
.nav-dropdown{border:1pxsolid#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:#FF6633}
.nav-dropdown-default>li:hover>a, .nav-dropdown .nav-dropdown-col>ul li:hover>a{color:white}
.nav-dropdown-default>li:hover{background:#FF00FF}
.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:1pxsolid#d2d2d2;margin-top:-40px;box-shadow:2px2px5px#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ước 2: Lưu lại & Hoàn thành
Như vậy là đã xong bạn đã chuyển menu mega của flatsome sang menu 3 cấp dropdown.
Hy vọng bài này mang đến sự bổ ích cho bạn.
