Có nên sử dụng menu FLatsome?
Flatsome làm menu tách làm 2 bản. 1 bản giành cho Mobile và 1 bản giành cho Desktop. Nhưng khi bạn tải trang thì nó load cả css + html và js.
Ví dụ 1 cái menu:
Bạn vào xem source để kiểm tra:
đây là menu desktop
Khi kéo xuống dưới sẽ có thêm menu của mobile
Khi load cái đám html + css này tầm 20KB
Còn JS của nó tầm 20KB
Chính vì nhược điểm này nên mình đã tìm cách cách tối ưu làm lại menu responsive cho Flatsome.
Menu này dùng ưu điểm rất nhẹ cả html +css +js hơn 10KB thôi.
Menu desktop mới
Menu mobile mới
Nếu bạn muốn làm menu như mình thì làm theo hướng dẫn sau nhé:
B1: Bạn tải template menu tại đây: https://github.com/syrizaldev/vanilla-navbar-menu
B2: Mở file index.html sửa tên và đường dẫn phù hợp với web bạn
B3: Tạo 1 cái UX-BLOCK và dán html trên vào.
B4: Mở script lên copy hết vào và làm thẻ rồi lưu UX-block lại bạn đặt tên gì thì tùy. Ví dụ mình đặt tên là “Menu” shortcode nó sẽ là [block id=“menu”]
B5: copy css vào Tùy biến ▸ StyleCustom CSS: paste vào.
B6: Vào Tùy biến ▸ Header kéo 1 cái html cho vào buttom header.
B7: lưu lại và test.
Lưu ý tùy vào web bạn và sở thích CSS mà bạn chỉnh sửa lại cho phù hợp với web bạn nhé
Chúc các bạn thành công
Demo xem tại : shopcon.vn