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
- Create a new UX Block and copy + paste UX shortcode
- Add the custom CSS to your WordPress project
- Add UX Block shortcode in Flatsome footer script
UX Shortcode (Menu design)
[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
.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.
Vertical Menu and Mobile Tabs in Flatsome Theme
How to use the Header Builder in Flatsome Theme
Create a Custom 404 Page in Flatsome Theme
Black Friday ⚡ Limited offer 50%-Off
Look better. Sell Better. With our designs.
Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.