Chia sẻ code CSS menu con dành cho theme Flatsome – Sub menu
Các bạn đang xài theme Flatsome cái đặt website sẽ gặp trường hợp Menu kiểu vertical bị chia cột chia dòng trông rất xấu xí, mình chia sẻ đến các bạn Code CSS menu con dành cho theme Flatsome ( sub menu ) để khắc phục tình trạng chia cột menu con các cấp xấu xí mặc định của theme Flatsome.
Bạn sẽ khó phân biệt được danh mục menu cấp 2, menu cấp 3 … nếu không được tùy chỉnh gọn gàng và chi tiết thì sẽ như hình bên dưới ( mặc định hiển thị danh mục menu kiểu sổ dọc của theme Flatsome).
Sau khi thêm code CSS menu con dành cho theme Flatsome thì mình được kết quả như hình dưới, khi bạn rê chuột vào menu cấp 2 thì menu cấp 3 sẽ hiện thêm một cột bên cạnh, người dùng sẽ thấy gọn gàng hơn và dễ chọn đúng danh mục menu khi rê chuột vào từ danh mục menu.
Code CSS menu con cấp 3 dành cho theme Flatsome
Bạn vào tùy chỉnh CSS của theme: Quản trị > Giao diện > Tùy chỉnh > Style > Custom CSS
Sau đó copy toàn bộ đoạn code phía dưới vào vùng custom css và lưu lại là xong.
.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 lưu ý 2 chỗ mình bôi đỏ trong đoạn code, bạn có thể đổi màu nền tại 2 vị trí này, khi rê chuột vào danh mục menu thì nền danh mục đó sẽ hiện theo màu bạn chọn.
Lời kết: Code này chỉ dùng cho theme Flatsome phiên bản cũ hiện tại thôi nhé, có thể những bản cập nhật theme Flatsome mới sau này sẽ được tích hợp tùy biến danh mục menu con và không cần tới code này. Đoạn code trên chỉ linh nghiệm tới danh mục menu con cấp 3 thôi nha, nếu website bạn có nhiều danh mục con hơn thì có thể không như ý.
