Sửa lỗi hiển thị menu 3 cấp trên theme Flatsome

Vì sao phải sửa lỗi hiển thị menu 3 cấp trên theme Flatsome

Flatsome là theme WordPress được phát triển bởi UX-themes dùng cho các website thương mại điện tử hoặc tin tức. Không có gì làm lạ khi Flatsome đã trở thành một trong những theme bán chạy nhất trên Themeforest bởi nó sở hữu khả năng tùy chỉnh linh hoạt, tính năng đa dạng và hiệu suất tốt trên các thiết bị di động. Đặt biệt Flatsome còn hỗ trợ tính năng UX Builder mạnh mẽ giúp thiết kế các landing page nâng cao hiệu quả bán hàng.

Tuy nhiên, một theme không thể hoàn hảo đến mức bạn có thể mua về và cái đặt nó lên sử dụng mà không cần phải chỉnh sửa, Flatsome cũng không ngoại lệ.

Việc hiển thị menu 3 cấp trên theme Flatsome không hẳn là lỗi nhưng cách hiển thị gây khó chịu, không thẩm mỹ, ảnh hưởng trải nghiệm người dùng và có thể làm khách hàng bỏ sót thông tin, ảnh bên dưới là 1 ví dụ

Để sửa lỗi hiển thị menu 3 cấp trên theme Flatsome, bạn cần làm theo các nước sau:

Bước 1: Thêm CSS vào tùy chỉnh CSS của theme Flatsome

Copy toàn bộ code CSS bên dưới vào mục tùy chỉnh theme: Flatsome -> Advanced -> Custom CSS -> Dán code CSS vào khung “ALL SCREENS”

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

Đây là hiển thị menu 3 cấp sau khi dán code CSS

Bước 2: Chỉnh màu backgroup cho phù hợp

Để chỉnh sửa màu backgroup cho phù hợp với giao diện web của bạn, có thể chỉnh ở 2 đoạn sau đây:

.nav-dropdown .nav-dropdown-col>ul li:hover{background:#db0000}

-> #db0000: Màu hiển thị menu cấp 3

.nav-dropdown-default>li:hover{background:#fbae3c}

-> #fbae3c: Màu hiển thị menu cấp 2

Sau đó “Save All Changes”, xóa cache và tận hưởng thành quả.

Trên đây là hướng dẫn sửa lỗi hiển thị menu 3 cấp trên theme Flatsome. Chúc bạn thành công!

Để biết nhiều chia sẽ hay về WordPress mời bạn ghé thăm https://vnpthcm.com/thu-thuat/wordpress