Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
332 lượt xem

Hướng dẫn chỉnh sửa CSS menu 3 cấp trên theme Flatsome

Chào các bạn, mình làm web sử dụng theme Flatsome rất nhiều, trong số đó phải kể đến kho mẫu ninhbinhweb.com | ninhbinhweb.net mà lâu nay chắc bạn cũng đã biết.

Có một thực tế là, menu cấp 2 của Flatsome là kiểu vertical 1 cột như bình thường, không vấn đề gì. Tuy nhiên, menu cấp 3 trở đi thì nó tự động chia nhiều cột bao gồm tên trình đơn menu và các sub-menu theo cột của nó. Việc chia cột như vậy cho cảm giác rất gọn gàng và khoa học đối với điều kiện tất cả các trình đơn menu đều có sub-menu. Ngược lại, dù chỉ 1 trong số các trình đơn menu không có sub-menu thì nó gần như là bị lỗi, và nó hiển thị cực kỳ xấu. Ví dụ như hình dưới đây:

Giuseart.com-Sửa-giao-diện-đa-cấp-trên-theme-Flatsome
Theme Flatsome có menu 3 cấp cực kỳ xấu

Trong bài viết này, mình sẽ hướng dẫn các bạn sửa CSS để menu đa cấp của theme Flatsome có thể hiển thị đẹp hơn, hoặc cơ bản là làm cho nó hiển thị kiểu vertical menu như bình thường chúng ta hay sử dụng nhé!

Bài viết dựa trên kinh nghiệm và công việc thực tế của admin GiuseArt.com, sử dụng theme Flatsome và WordPress 4.9.8. Do đó, bài hướng dẫn phù hợp 100% cho các bạn làm web sử dụng theme Flatsome. Còn những theme khác thì có vẻ như không hoạt động được!

Bước 1: Thêm CSS vào tùy chỉnh CSS của theme

Copy toàn bộ đoạn code CSS sau vào phần tùy chỉnh CSS của theme. Quản trị > Giao diện > Tùy chỉnh > Style > Custom CSSCustom CSS:

Trong đoạn code CSS trên, mình đã trang trí menu đa cấp cho theme Flatsome theo tông cam – đỏ. Do đó, nếu các bạn thấy ưng thì có thể dùng được luôn. Ngược lại, các bạn tìm sửa thuộc tính background:mã_màu trong phần mình đánh dấu dưới đây:

Giuseart.com---Hướng-dẫn-sửa-CSS-menu-đa-cấp-cho-theme-Flatsome
Màu vàng – mã màu khi rê chuột vào menu cấp 3. Màu xanh – mã màu khi rê chuột vào menu cấp 2

Trong đó:

  • Màu xanh: mã màu nền của trình đơn menu cấp 2 khi rê chuột vào.
  • Màu vàng: mã màu nền của trình đơn menu cấp 3 khi rê chuột vào.

Bước 2: Save Change

Các bạn Save Change/ Apply Change để xem thành quả nhé. Hy vọng các bạn làm đúng theo hướng dẫn và có thể sửa được sự khó chịu của menu cấp 3 trên theme Flatsome nhé! Chúc các bạn thành công.

Giuseart.com - Sửa CSS menu đa cấp trên theme Flatsome
Sản phẩm đã hoàn thiện sau khi sửa CSS menu đa cấp trên Flatsome
Hướng dẫn chỉnh sửa CSS menu 3 cấp trên theme Flatsome
5 (1) vote

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay
Thẻ tìm kiếm:

Bài viết mới cập nhật:

Bình luận Facebook

2 bình luận trong “Hướng dẫn chỉnh sửa CSS menu 3 cấp trên theme Flatsome

  1. AllinoneClick says:

    Đã áp dụng và thành công. Nhưng có vẻ dòng 3 thừa “font-weight:normal !important;” vì khi mình cho vào Flatsome thấy nó báo bị Dup nên đã xóa nó đi. Kết quả là hết báo lỗi mà menu vẫn đẹp như của bạn.
    Mong ad giúp đỡ là muốn thê cái mũi tên “>” chỗ menu cấp 2 để chỉ sang menu cấp 3 thì thêm dòng lệnh nào ad nhỉ?

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook