Bước 1: Tạo Element Tab có thể upload icon

• Truy cập UX Blocks → tạo một block mới.
• Trong UX Builder, thêm Element “Tabs”.
• Mỗi tab đại diện cho một mục trong menu, bạn có thể thêm ảnh icon đại diện bằng cách chèn hình ảnh vào tiêu đề hoặc nội dung của tab.

Bước 2: Dựng khối UX Builder

• Sử dụng UX Builder để thiết kế giao diện menu mobile theo ý muốn.
• Bạn có thể thêm icon, chữ, hiệu ứng hover, phân cột,… tất cả đều có sẵn và dễ tùy chỉnh trong Flatsome.

Bước 3: Gán block vào khu vực mobile menu

• Vào Flatsome > Theme Options > Mobile Menu.
• Tại phần “Mobile Menu Content”, chọn Block vừa tạo ở bước 1.
• Bật tùy chọn “Replace default menu with block” để sử dụng block UX Builder thay cho menu mobile mặc định.

Bước 4: Chỉnh sửa hoàn thiện

• Tuỳ chỉnh lại icon, cỡ chữ, khoảng cách giữa các mục để phù hợp với trải nghiệm mobile.
• Kiểm tra trên điện thoại hoặc chế độ responsive để đảm bảo mọi thứ hiển thị đúng.

Dưới đây là cách thực hiện

Thêm Icon Image vào tiêu đề thẻ Tab element

Bạn copy – paste đoạn code sau bỏ vào functions.php nha!  Vì đoạn code khá dài nên mình sẽ để trên gitub nhé: My github

Dựng khối UX builder cho menu mobile

Bạn tạo khối UX Builder nhé Sau đó, copy toàn bộ shortcode của block này của mình. Lưu ý: bật chế độ soạn thảo văn bản để paste dữ liệu. My github

Gán Header block cho khối Ux

Bạn vào Giao diện → Tùy biến → Header, sau đó chọn phần HTML → Block, rồi gán khối block UX Builder bạn vừa tạo vào đây. Tùy theo thiết kế và cấu trúc hiện tại của website, bạn có thể gán vào Header Block 1 hoặc Header Block 2 đều được,  miễn là bạn nhớ rõ vị trí mình đã gán.

Lưu ý: Bước này rất quan trọng vì lát nữa bạn sẽ cần bật khối đó trong phần Header Mobile Menu của Flatsome Options để nó hiển thị đúng trên giao diện di động.

Sau khi đã gán Header Block 2 cho khối vừa tạo, bạn quay lại phần Tùy biến → Header → Header Mobile Menu / Overlay trong Flatsome. Sau đó bạn làm các bước sau: bật Header Block  -> Tắt các biểu tượng và element mặc định

Trang trí menu mobile với Custom CSS

Bạn copy – past đoạn code sau vào file custom CSS: My github

Sau khi bạn đã thêm CSS tùy chỉnh, chắc chắn giao diện menu mobile nhìn chuyên nghiệp, hiện đại và khác biệt rõ rệt so với menu mặc định của Flatsome. vvBạn hãy kiểm tra lại toàn bộ giao diện trên thiết bị di động, xem phần nào còn hiển thị chưa đẹp, khoảng cách chưa hợp lý, hoặc font/icon chưa cân đối,… thì có thể tự chỉnh thêm bằng CSS để hoàn thiện theo đúng ý mình.

Sau khi hoàn thiện, hãy hưởng thụ kết quả nhé. Chúc bạn thành công !