Boost your visitor mobile experience with this sticky menu navigation custom made for your Flatsome theme. No plugin needed, just import the pre-made UX Builder shortcode and CSS and modify the icons & links.
UX Shortcode
[section label=”Sticky Mobile Menu” bg_color=”rgb(72, 72, 72)” dark=”true” padding=”5px” video_visibility=”visible” class=”sticky-mobile-menu”]
[row style=”collapse” width=”custom” custom_width=”95%” v_align=”equal” padding=”10px 0px 10px 0px” depth_hover=”4″]
[col span=”3″ span__sm=”3″]
[featured_box img=”https://www.sebdelaweb.com/wp-content/uploads/shopping.png” img_width=”25″ pos=”center” font_size=”small” link=”#”]
Shop
[/featured_box]
[/col]
[col span=”3″ span__sm=”3″]
[featured_box img=”https://www.sebdelaweb.com/wp-content/uploads/discount-badge.png” img_width=”25″ pos=”center” font_size=”small” link=”#”]
Sale
[/featured_box]
[/col]
[col span=”3″ span__sm=”3″]
[featured_box img=”https://www.sebdelaweb.com/wp-content/uploads/menu.png” img_width=”25″ pos=”center” font_size=”small” link=”#”]
Cart
[/featured_box]
[/col]
[col span=”3″ span__sm=”3″]
[featured_box img=”https://www.sebdelaweb.com/wp-content/uploads/avatar.png” img_width=”25″ pos=”center” font_size=”small” link=”#”]
Account
[/featured_box]
[/col]
[/row]
[/section]
CSS
/*************** STICKY MOBILE MENU ***************/
.sticky-mobile-menu {
position: fixed;
left: 0;
bottom: 0;
z-index: 999;
}
.row-box-shadow-4-hover .col-inner:hover {
box-shadow: none;
}
Nguồn: https://www.sebdelaweb.com/flatsome-tutorial/create-a-sticky-bottom-menu-for-mobile/
