Sticky Mobile Footer Menu in Flatsome Theme

In this guide, you’ll learn how to create a sticky footer mobile menu for your WordPress site using the Flatsome theme. This is perfect for WooCommerce sites, allowing easy navigation on mobile. Follow these steps to add a stylish, customizable mobile footer menu to your site.

Add a sticky footer menu to your mobile site that stays at the bottom, allowing users easy access to important links like “Home,” “Shop,” and “Account.” This tutorial includes code snippets and instructions for implementing and customizing the menu.

Step-by-Step Guide

1. Log into WordPress and Create a New UX Block

• Go to your WordPress dashboard and create a new UX Block.
• Name it something memorable, like “Sticky Mobile Menu.”

2. Copy the Provided Shortcode

• In the member area, copy the shortcode provided for the sticky menu.
• Paste this shortcode in the “Text” tab of the UX Block editor (not the “Visual” tab), as the code may not render correctly otherwise.
• Publish the UX Block once you’ve pasted the code.

3. Customize the UX Block in UX Builder

• Open the UX Builder for this new block.
• Switch to mobile view to preview the menu as it appears on mobile devices.
• The setup includes a stack element for easy arrangement of icon boxes. You can add or remove icons as desired.

4. Choose and Add Icons for Your Menu

• Visit the recommended icon library (like Remix Icons) and choose icons for your menu options.
• Download icons at double the size (e.g., 64 pixels if displayed at 32 pixels) to ensure clear display on high-resolution screens.
• Upload the icons in UX Builder, adjusting icon sizes or link texts as desired.

5. Adjust Visibility Settings for Mobile or Tablet

• In the UX Block settings, set visibility to “Only Mobile” to ensure it appears only on mobile devices.
• If desired, adjust to include visibility on tablets by selecting “Mobile and Tablet.”

6. Add Custom CSS

• Copy the CSS below:

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

• Go to Appearance > Customize > Additional CSS (or Flatsome > Advanced > Custom CSS).
• Paste the CSS here. This code fixes the footer menu at the bottom, adds a shadow, and creates space to avoid overlap with other elements.
• Save changes.

7. Add the UX Block to the Footer Script Section

• Copy the UX Block’s shortcode.

[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://portal.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://portal.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://portal.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://portal.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]

• Go to Flatsome > Global Settings and locate the “Footer Script” section.
• Paste the shortcode here and save all changes.

8. Test and Adjust

• Preview your site on mobile to confirm the sticky footer menu appears as expected.
• Adjust links, icons, or text size to fit your site’s style. Now, users can navigate quickly from the footer on any mobile device.

Adding a sticky footer mobile menu in WordPress with the Flatsome theme is a great way to enhance navigation on your site, especially for mobile users. With this step-by-step setup, your visitors can easily access key links like Home, Shop, and Account right from the bottom of their screens. By customizing icons, CSS, and visibility settings, you can adapt the menu to fit your style and user needs perfectly.