Tạo menu footer ở dưới di động

Tác giả : admin | 21:06 11/12/2021 | 60 Lượt xem

Kết quả

B1: Tạo ux-block có tên là Menu footer  bằng cách copy các dòng lệnh sau 

[section class=”footer-pttuan-menu”]
[ux_stack distribute=”around” class=”menu-footer-pttuan-main active”]
[featured_box img =”274″ pos=”center” title=”Danh mục” class=”danh-muc”][/featured_box]
[featured_box img =”286″ pos=”center” title=”Tìm Kiếm” class=”tim-kiem”][/featured_box]
[featured_box img =”285″ pos=”center” title=”Giỏ hàng” class=”gio-hang”][/featured_box]
[featured_box img =”284″ pos=”center” title=”Tư Vấn” class=”tu-van”][/featured_box]

[/ux_stack]

[/section]

B2: Thêm hàm để xử lý sự kiện trên mobile

function menu_footer(){
if(wp_is_mobile()){
echo do_shortcode(‘[block id=”menu-footer”]’);
}
}
add_action(wp_footer,’menu_footer’);

b3: Thêm file css

.footer-pttuan-menu{
position: fixed;
bottom:0;
background: #fff;
z-index:999;
padding: 10px 0 0 30!important;
}
.footer-pttuan-menu .icon-box-img{
width: 30px!important;
}
.footer-pttuan-menu .icon-box-text{
font-size :12px;
}
.menu-footer-pttuan-main>*{
width: 25%!important;
}
.menu-footer-pttuan-main.active{
display: flex;
}

Sau đó vào đây để chỉnh sửa (có thể thêm icon cho to, nhỏ, tùy ý )

CHọn là none