Are you looking to create an app-like sticky bottom mobile menu in Elementor? This menu stays fixed at the bottom of the screen as the user scrolls, giving mobile visitors easy access to navigation without scrolling back to the top.
With the Mobile Menu widget in The Plus Addons for Elementor, you can create a sticky bottom mobile menu in Elementor.
To check the complete feature overview documentation of The Plus Addons for Elementor Mobile Menu widget, click here.
Note: This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
What It Does
The Mobile Menu widget’s Style section includes a Position control. Setting Position to Fixed and Fixed Position to Bottom pins the whole mobile menu bar to the bottom edge of the viewport, so it stays visible while the visitor scrolls the page.
Why It Matters
On a phone screen, a menu that only lives at the top forces visitors to scroll all the way back up to navigate. A bottom-fixed menu keeps navigation within thumb reach at all times, which is the same interaction pattern used by native apps and most mobile-first e-commerce and service sites.
What You Get
A mobile-only navigation bar that stays pinned to the bottom of the screen, built from the same Menu 1 / Menu 2 item repeaters as the rest of the Mobile Menu widget, with a screen-width breakpoint that controls exactly when it appears.
Benefits
- Keeps key navigation reachable on mobile without a scroll-to-top action
- Works from the same widget you already use for other mobile menu styles, no separate add-on
- The activation breakpoint is a plain pixel value, so you control exactly which screen sizes see it
Capabilities
- Position dropdown: Absolute or Fixed
- Fixed Position dropdown (only shown when Position = Fixed): Top or Bottom
- Open Mobile Menu slider sets the exact screen width (in px) at which the mobile menu activates and opens automatically
- Menu 1 and Menu 2 repeaters build the actual navigation items shown in the bar, each with its own icon or image, text, link, and pin text
- Style 1 and Style 2 visual layout choices, independent of the Fixed/Bottom setting
How It Works
The Position control switches the widget’s CSS positioning between absolute and fixed. When Fixed is selected, a second dropdown (Fixed Position) appears and lets you choose Top or Bottom; Bottom pins the bar to the bottom edge of the browser viewport instead of the page. The Open Mobile Menu slider is a separate max-width media-query breakpoint: below that screen width the bar displays, at or above it the bar is hidden, so the same widget instance can be scoped to phones only.
How to Use It
This is a Pro feature. Upgrade to The Plus Addons for Elementor Pro for full functionality, plus 120+ other widgets.
To do this, add the Mobile Menu widget to the header template and follow the steps:
Note: To create the header template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. After selecting the appropriate style from the Style section, select Fixed from the Position dropdown.
2. From the Fixed Position dropdown, select Bottom.
3. In the Open Mobile Menu section, set the screen width at which the menu becomes visible. Use 767px or lower to show the menu on mobile screens only.
4. From the Menu 1 and Menu 2 tabs, create the menu items based on the style you selected in the Mobile Menu tab.
Your mobile menu will now stick at the bottom of the screen as the user scrolls. To add a menu toggle button to your Elementor header, see how to add a menu toggle button in an Elementor header.
Use Cases
- Mobile-first WooCommerce stores where a bottom navigation bar keeps shop pages always accessible
- Service business sites with multiple sections, making key pages reachable without scrolling back up
- Portfolio and agency sites where a persistent bottom menu replaces a traditional hamburger toggle
Limitations
- Fixed Position and its Bottom option are Pro-only; the free version does not expose this control
- There is no dedicated horizontal-alignment control for the bar itself once it is set to Fixed + Bottom; it spans the width the header template gives it
- Swiper-style layout, floating toggle buttons, and off-canvas panels are separate Pro Mobile Menu features, not part of the Fixed + Bottom setting
- The Open Mobile Menu breakpoint is a single value; there is no separate breakpoint for tablet vs. phone
Troubleshooting
- Menu items look off-center inside the bottom bar. There is no built-in horizontal-centering control for the fixed bottom bar (confirmed live in the FluentSupport ticket where a customer asked to center it): use the widget’s own item spacing/alignment style controls per menu item, or add custom CSS to the bar wrapper.
- Fixed Position or Bottom option is missing. These are Pro-only controls; confirm The Plus Addons for Elementor Pro is active and licensed, not just the free plugin.
- Bar shows on desktop too. Check the Open Mobile Menu breakpoint value; a value higher than your intended mobile width will activate the bar on tablets or small desktops as well.
- Bar overlaps page footer content. Because Fixed positioning removes the element from normal page flow, add bottom padding to your page/section equal to the bar’s height so footer content is not hidden behind it.
Unlock Premium Mobile Menu Features (Pro Only)
Access advanced mobile navigation options with The Plus Addons for Elementor Pro and the enhanced Mobile Menu widget.
Swipe-Enabled Swiper Menu & Column Layouts
Select between a swiper-style horizontal menu or a column layout for mobile navigation. Configure touch-sensitive scrolling, pagination indicators, and item spacing from the widget settings. See How to Create a Swiper Mobile Menu in Elementor.
Extra Floating Toggle Button & Active Page Indicator
Add a central floating button to open the mobile menu, and highlight the current page in the navigation visually. Use this when you want visitors to always see which page they are on as they navigate.
Off Canvas Menu Panel
Design a slide-in off-canvas menu that opens on click or hover. Configure entry animations, position, width, and overlay settings directly in the Elementor editor without custom code.
Also read How to Create a Toggle Menu for Mobile in Elementor and How to Add Elementor Menu Toggle Button in Header.
