Hướng dẫn thêm Toggled icon vào menu genesis

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.

Hướng dẫn thêm Toggled icon vào menu genesis

 

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

 

Thông tin liên hệ

    • 1

      Step 1

    • 2

      Step 2

    • 3

      Step 3

    1/3

    Step 1

    This will close in 0 seconds

    <div class="content-form-widget">
    <p style="color: #003DA5;">Nhận Báo Giá</p>
    <p style="font-size: 87.5%">InDMP sẽ trả lời mail của bạn trong thời gian sớm nhất</p>
    </div>

      This will close in 20 seconds