Trong theme genesis framework hay chính xác là như hầu hết các chủ đề con của StudioPress khi chúng ta nhấn vào biểu tượng trình đơn hamburger với độ rộng màn hình nhỏ trên điện thoại di động sẽ xuất hiện một biểu tượng icon nhỏ phía trên màn hình tuy nhiên các biểu tượng này sẽ không thay đổi khi các trình đơn trong menu được hiện ra có nghĩa là nó chỉ sử dụng một icon duy nhất.
Vì vậy nếu bạn muốn thêm các icon khác nhau vào khu vực hamburger này thì sẽ phải làm thế nào? bài viết này tôi sẽ hướng dẫn các bạn cách thêm biểu tượng X(đóng) khi chúng ta click vào doanh mục menu. Giúp cho trang web của bạn nhìn đẹp hơn bao giờ hết.
Cụ thể nó giống như hình ảnh màn hình được chụp bên dưới. Trước và sau khi click vào menu.
Để đơn giản hóa cách tùy biến hướng dẫn này cho phép bạn thay đổi biểu tượng bánh hamburger cho trình đơn đáp ứng khi nhấp chuột mà không cần sử dụng jQuery. Việc này sẽ không ảnh hưởng đến tốc độ load trang của bạn.
Xem thêm: Tạo menu chuyên nghiệp với Mega Main Menu mới nhất 2017
Hướng dẫn thêm Toggled icon vào menu genesis
Để thực hiện việc này chúng ta chỉ cần sao chép đoạn css bên dưới và dán vào file styles.php trong thư mục chủ đề con của mình mặc định sẽ là contents/themes/genesis-sample/style.css thay đổi cho đúng với theme bạn đang dùng.
.activated:before {
content: "\f158";
}
Như vậy là xong giờ đây hãy lưu lại toàn bộ thao tác của bạn và quay lại trang chủ xóa bộ nhớ cache và xem kết quả nào.
Kết quả sau khi thực hiện hướng dẫn trên
Xem thêm hướng dẫn khác trong genesis framework
