Tạo Menu footer cho mobile trên flatsome?

Đã làm nhiều nhưng nhiều khi lại quên đi, khi đó thì phải mường tượng/ tư duy lại cách để làm như nào? Nay ghi lên đây luôn để lần sau không cần phải tư duy thêm nữa.

Ý tưởng cách làm menu ở dưới màn hình cho mobile

Sẽ tạo 1 block tên là mobi menu gồm các thông tin hiển thị ở dưới footer sao tiện cho người dùng như: home, cart, account, shop, zalo. Cái này thì tùy từng website là sản phẩm/dịch vụ. Sử dụng uxblock để tạo, kết hợp cùng fontawsome để thêm hình ảnh cho nhẹ nhàng.

Tùy chọn hiển thị cái block đó chỉ ở mobile, ẩn ở desktop.

Thêm css để nó luôn hiển thị ở dưới footer màn hình, bổ sung thêm class sticky-mobile-menu ở phần tùy chỉnh uxblock.

/*************** STICKY MOBILE MENU  ***************/
.sticky-mobile-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
}

Hiển thị chúng ra ngoài giao diện

Tạo một uxblock footer, chèn block mới tạo mobi menu vào phần footer đó. Bằng cách này thì giao diện sẽ hiển thị ở global, chỉ hiển thị ở mobile.

Bạn cũng có thể tham khảo/copy đoạn uxblock dưới đây

[section label="Sticky Mobile Menu" bg_color="rgba(255, 255, 255, 0)" dark="true" padding="5px" padding__sm="15px" video_visibility="visible" class="sticky-mobile-menu" visibility="show-for-small"]

[row style="collapse" col_style="divided" col_bg_radius="5" width="full-width" v_align="middle" h_align="center" padding="10px 0px 10px 0px" padding__sm="6px 3px 6px 3px" depth_hover="3"]

[col span="3" span__sm="3" align="center" bg_color="rgba(0, 0, 0, 0.7)"]

[ux_html]

<a href="https://balokanken.com/"><i class="fas fa-home fa-lg"></i> Home</a>
[/ux_html]

[/col]
[col span="3" span__sm="3" align="center" bg_color="rgba(0, 0, 0, 0.807)"]

[ux_html]

<a href="/shop"><i class="fas fa-store fa-lg"></i> Shop</a>
[/ux_html]

[/col]
[col span="3" span__sm="3" align="center" bg_color="rgba(0, 0, 0, 0.9)"]

[ux_html]

<a href="https://zalo.me/0901467518"> <i class="far fa-comments fa-lg"></i> Zalo</a>
[/ux_html]

[/col]
[col span="3" span__sm="3" align="center" bg_color="rgb(0, 0, 0)"]

[ux_html]

<a href="/cart"><i class="fas fa-cart-plus fa-lg"></i> Cart</a>
[/ux_html]

[/col]

[/row]

[/section]

và dưới đây là hình ảnh kết quả của đoạn code trên: