Cyberpanel

Pin năng lượng mặt trời

You are here: Home / Genesis Theme / Blog Genesis Theme – Tạo hightlight menu

Blog Genesis Theme – Tạo hightlight menu

November 3, 2023 November 3, 2023 admin 0 Bình luận

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é

Before
After

Đạ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

  1. 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ị
  2. Ở 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)
  3. Tích vào cái ô có chữ CSS Classes.
  4. Chọn vào menu nào mà bạn muốn nó Hightlight ý
  5. 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.
  6. Coppy đoạn code CSS làm Hightlight menu mà mình để ở dưới
  7. 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 1

Ảnh Minh Họa 2

ảnh minh họa 2

Ảnh Minh Họa 3

Ả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

Chuyên mục: Genesis Theme

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Recent Posts

  • TOP idol JAV Nhật Bản sinh năm 199x đến 2000 siêu xinh đẹp
  • Blog Genesis Theme – Tạo hightlight menu
  • So sánh VPS của Vultr với Azdigi
  • Bài 8: Cài đặt SSL https cho website trên Cyber Panel
  • Bài 7: Website trên Cyberpanel bị lỗi 404

Recent Comments

No comments to show.

Bản quyền © 2025 ·

QTCland.com đồng hành cùng chúng tôi trong việc mang đến các nội dung hữu ích như "2018 mệnh gì?" hay hướng dẫn "192.168.l.l". Bên cạnh đó, QTCland.com còn cung cấp sản phẩm chất lượng cao như "đèn năng lượng mặt trời 300W" với giá hợp lý, phù hợp mọi nhu cầu sử dụng của bạn.