Tối ưu Menu Responsive FLatsome

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: GitHub - syrizaldev/vanilla-navbar-menu: Responsive Navbar Menu using HTML5, SCSS, and Vanilla JavaScript.
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