Cách chỉnh sửa menu cấp 3 trên theme Flatsome sử dụng css

Menu-cap3-css-3

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:

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ế, 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 CSS > Custom 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:

Menu-cap3-css

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.

Menu-cap3-css-3

13 thoughts on “Cách chỉnh sửa menu cấp 3 trên theme Flatsome sử dụng css

  1. 720p says:

    Excellent article. I absolutely love this website. Continue the good work! Melanie Finn Mosier

  2. antalya haberleri says:

    Hi! Quick question that’s completely off topic. Do you know how
    to make your site mobile friendly? My blog looks weird when browsing from my iphone4.
    I’m trying to find a theme or plugin that might be able to correct this issue.
    If you have any suggestions, please share.
    Many thanks!

  3. secureserver bypass says:

    Hi there! Do you know if they make any plugins to safeguard against hackers?
    I’m kinda paranoid about losing everything I’ve worked
    hard on. Any recommendations?

  4. takipci satin al says:

    Excellent post. I was checking continuously this blog and I’m impressed!

    Very useful info specially the remaining part 🙂 I
    care for such info much. I was seeking this particular info for a long time.
    Thanks and good luck.

  5. takip2018.com says:

    I am curious to find out what blog system you’re working with?
    I’m experiencing some minor security issues with my latest site and I’d
    like to find something more secure. Do you have any suggestions?

  6. ko cuce says:

    Heya i am for the first time here. I found this board and I in finding It
    truly helpful & it helped me out much. I’m hoping to give something again and aid
    others like you helped me.

  7. instagram takipci satin al says:

    You really make it seem so easy with your presentation but I find this topic to be actually something
    that I think I would never understand. It seems too complicated and extremely broad for me.
    I am looking forward for your next post, I’ll try to get the hang of it!

Trả lời

Email của bạn sẽ không được hiển thị công khai.

093 608 8928