Bạn có thể thêm các chỉ báo mũi tên vào menu thả xuống của trình đơn điều hướng trong chủ đề Genesis của mình chỉ với một chút CSS. Điều này sẽ giúp khách truy cập trang web của bạn có thể xem nhanh các mục menu nào có nhiều mục hơn được ẩn bên dưới chúng. Hướng dẫn này hoạt động cho tất cả các chủ đề Genesis. Nếu chủ đề của bạn đã sử dụng các biểu tượng, bạn có thể thay đổi chúng cho các dashicons, nếu bạn muốn.
Dashicon rất tuyệt cho việc này vì chúng đã được xếp vào hàng trong nhiều chủ đề Genesis và vì chúng cũng được sử dụng trong quản trị viên WordPress, và vì vậy, thật dễ dàng để thêm chúng vào chủ đề của bạn. Ngoài ra còn có ba loại mũi tên mà bạn có thể chọn, vì vậy chúng có thể phù hợp với hầu hết mọi phong cách chủ đề.
Bạn có thể xem tất cả các dashicons ở đây. Các mũi tên nằm trong phần có nhãn “Sắp xếp”.
Nếu chủ đề của bạn không có dashicons xếp hàng hoặc nếu bạn cần thêm hướng dẫn từng bước để sử dụng chúng, hãy xem hướng dẫn trước đó về cách sử dụng dashicons. Nó giải thích cách thêm chúng vào chủ đề của bạn.
Bạn có thể thêm phần CSS vào CSS tùy chỉnh của mình (trong Giao diện> Tùy chỉnh> CSS tùy chỉnh) hoặc vào style.css của chủ đề của bạn.
Nếu bạn thêm CSS vào style.css của mình, bạn muốn chắc chắn thêm các biểu tượng vào phần menu trên màn hình của chủ đề. Phần máy tính để bàn nằm trong phần CSS chính, trước truy vấn phương tiện hoặc trong phần truy vấn phương tiện bắt đầu bằng @media only screen and (min-width: 1023px) {, nếu chủ đề của bạn ưu tiên thiết bị di động. Bạn có thể muốn điều chỉnh số chiều rộng tối thiểu để phù hợp với chủ đề của mình. Bạn cũng có thể muốn xóa các mũi tên cho kích thước màn hình điện thoại di động.
Thay đổi kích thước mũi tên
Nếu bạn muốn thay đổi kích thước của mũi tên, đây là dòng để chỉnh sửa:font: normal 16px/1 'dashicons';
Thay đổi 16px thành 18px cho lớn hơn hoặc thành 14px cho nhỏ hơn.
Để loại bỏ các mũi tên thả xuống
Để xóa các mũi tên thả xuống, đối với mỗi kiểu bên dưới, hãy thêm@media only screen and (max-width: 1023px) {
.genesis-responsive-menu .genesis-nav-menu > .menu-item-has-children > a::after {
content: '';
}
}Kiểu mũi tên 1
Cái này sử dụng “/ f140” - và tạo kiểu thả xuống kiểu truyền thống.@media only screen and (min-width: 1023px) {
.genesis-nav-menu > .menu-item-has-children > a::after {
content: "\f140";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
}Kiểu mũi tên 2
Cái này sử dụng “/ f346” và tạo ra một mũi tên thật.@media only screen and (min-width: 1023px) {
.genesis-nav-menu > .menu-item-has-children > a::after {
content: "\f346";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
}Kiểu mũi tên 3
Cái này sử dụng “/ f347” và tạo ra một mũi tên mở rộng hơn.@media only screen and (min-width: 1023px) {
.genesis-nav-menu > .menu-item-has-children > a::after {
content: "\f347";
display: inline-block;
-webkit-font-smoothing: antialiased;
font: normal 16px/1 'dashicons';
padding-left: 3px;
vertical-align: top;
}
}Nếu bạn cần trợ giúp với các menu trang web của mình, bạn có thể liên hệ với tôi cho một dự án nhỏ.