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.

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

More popular tutorials

Discover more articles and tutorials to help you build better.

Look better. Sell Better. With our designs.

Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.

#1 WooCommerce Designs
This site uses cookies to offer you a better browsing experience.