Sticky Mobile Footer Menu in Flatsome Theme

Create a nice sticky menu for mobile just like a native smartphone app and improve your shop customer experience.

By Sebastiaan Gamelkoorn
Flatsome Webdesigner

Sticky Mobile Footer Menu in Flatsome Theme" data-src="Sticky Mobile Footer Menu in Flatsome Theme">

Get the best design for your Flatsome shop from $49

95% of the Flatsome shops get more conversion + sales with our designs

See our designs

Get access to Flatsome shortcode. Sign up for free

In this add-on video I’ll show you how to create a nice sticky footer mobile menu with your Flatsome theme.

How to create a sticky mobile menu

  1. Create a new UX Block and copy + paste UX shortcode
  2. Add the custom CSS to your WordPress project
  3. Add UX Block shortcode in Flatsome footer script

UX Shortcode (Menu design)

This free shortcode is locked. 

Sign Up / Login 
[row label="*Sticky Mobile Menu" style="collapse" width="full-width" class="sticky-mobile-menu" visibility="show-for-small"]

[col span__sm="12" padding="0px 0px 0px 0px" padding__sm="10px 0px 5px 0px" bg_color="rgb(255, 255, 255)" depth="5"]

[ux_stack distribute="around"]

[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/shopping-bag-line.png" img_width="32" pos="center" title_small="Shop" margin="0 0px 0px 0px" link="#"]

[gap height="0px"]


[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/percent-line.png" img_width="32" pos="center" title_small="Deals" margin="0 0px 0px 0px" link="#"]

[gap height="0px"]


[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/account-circle-line.png" img_width="32" pos="center" title_small="Account" margin="0 0px 0px 0px" link="#"]

[gap height="0px"]


[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/list-unordered.png" img_width="32" pos="center" title_small="Cart" margin="0 0px 0px 0px" link="#"]

[gap height="0px"]


[/featured_box]

[/ux_stack]

[/col]

[/row]

CSS code

This free shortcode is locked. 

Sign Up / Login 
.sticky-mobile-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    -webkit-box-shadow: 0px -8px 29px -12px rgba(0,0,0,0.2); 
    box-shadow: 0px -8px 29px -12px rgba(0,0,0,0.2);
}

.sticky-mobile-menu .icon-box-center .icon-box-img {
    margin: 0 auto 4px;
}

@media (max-width: 549px) {
#footer {
    margin-bottom: 90px;
}
}

Other tutorials & documentation

Boost your Flatsome shop further

Best Flatsome Theme Setup for WooCommerce Shops
Sticky Mobile Footer Menu in Flatsome Theme
Sticky Mobile Footer Menu in Flatsome Theme
UX Blocks explained in Flatsome Theme
UX Blocks explained in Flatsome Theme

Get all Seb's Flatsome Designs

Enjoy instant access to our vast library of premium Flatsome templates. Save more than $600 today.

All-Acces Pass $299 $960