Blog Genesis Theme – Tạo hightlight menu

Menu là thành phần điều hướng website, nếu ai sử dụng theme Gensis thì có thể tham khảo hướng dẫn sau đây để tạo một điểm nhấn nổi bật cho menu, muốn người đọc chú ý. Để dễ hiểu thì bạn nhìn hình dưới này nhé

Đại loại là mình sẽ tạo ra một điểm nhấn menu theo một màu nổi hơn trong menu, khi người dùng lướt qua sẽ thấy nó đập vào mắt hơn, gây chú ý cho người đọc hơn và họ có xu hướng click vào menu đó nhiều hơn nếu đúng cái họ quan tâm.

CREATE A HIGHLIGHTED MENU ITEM

TRong giao diện quản trị WordPress ( đã sử dụng theme Genesis rồi nhé ) thì chọn vào Appearance > Menus > chon tiếp vào menu muốn hiển thị
Ở góc trên cùng bên phải có chữ Screen Options thì chọn vào mũi tên trỏ xuống ( Ảnh minh họa 1)
Tích vào cái ô có chữ CSS Classes.
Chọn vào menu nào mà bạn muốn nó Hightlight ý
Giờ nó sẽ có thêm một ô CSS Classes field, đánh chữ menu-highlight ( Ảnh Minh Họa 2 ) và lưu lại.
Coppy đoạn code CSS làm Hightlight menu mà mình để ở dưới
vào tiếp theo thứ tự Appearance > Customize > Additional CSS ( Ảnh Minh họa 3)và dán đoạn code đó vào sau đó chọn Publish.

/* tạo Hightlight Menu*/
.genesis-nav-menu .menu-highlight a:not(.sub-menu a) {
    background: #000000 !important;
    color: #ffffff !important;
    padding: 18px 26px 14px !important;
}
.genesis-nav-menu .menu-highlight a:not(.sub-menu a):hover {
    background: #aaaaaa !important;
    color: #ffffff !important;
}

Giải thích:

background: #000000 !important; >>> Bạn sửa thành màu mình muốn > như dưới hình minh họa là #bb2649 > màu hồng phớt mà được tôn vinh là màu của 2023 đấy
color: #ffffff !important; >>>. là màu chữ nhé

Hình ảnh minh họa

Ảnh Minh Họa 2

Ảnh Minh Họa 3

Với 3 bước trên là bạn đã hoàn thành việc tạo một Menu Hightlinght rồi nhé

Kết quả là nó được như thế này