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

#footer {
margin-bottom: 90px;
}

Need professional design help?

Let's take your Flatsome shop to the next level.

Seb's design service

💎 Improve your Flatsome design in 30 minutes

Get 22 design tips that every Flatsome site could use.