Flatsome tutorial

Create a Sticky Bottom Menu for Mobile

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.

1. 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]

2. 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;
}

💎 Get Seb's 22 Flatsome design essentials

Leave your email and get the free video link