A menu bar pinned to the bottom of the screen keeps navigation within thumb reach while visitors scroll, the way phone apps do.
The Mobile Menu widget from The Plus Addons for Elementor creates this bar with its Position setting, and shows it only on the screen sizes you choose.
To check the complete feature overview documentation of The Plus Addons for Elementor Mobile Menu widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Mobile Menu is a Pro widget. In the free plugin it appears in the Elements panel with a lock icon, and a page that already holds a Mobile Menu widget shows nothing of it while Pro is inactive.
- Widget to enable: Mobile Menu, switched on under The Plus Addons > Widgets.
- Where to add it: any page, or a header template (for example with the free Nexter Builder) to show the menu on every page, as the widget’s own panel recommends.
How to Create a Sticky Bottom Mobile Menu
- Add the Mobile Menu widget and choose a Style in Content > Mobile Menu.
- Set Position to Fixed. This is already the default.
- Set Fixed Position to Bottom (also the default). Choose Top to pin the bar to the top of the screen instead.
- Set Open Mobile Menu to the widest screen that should show the bar, for example 767 for phones. The bar is hidden on every wider screen.
- Open Menu 1 (and Menu 2 for Style 2) and add the items: icon or image, Text and Link. Publish the page and open it on a phone.
The bar stays at the bottom of the screen while the page scrolls behind it:
Position Options
| Setting | Result |
|---|---|
| Fixed + Bottom (default) | Pinned to the bottom edge of the screen, full screen width, stays in place while scrolling. |
| Fixed + Top | Pinned to the top edge of the screen, full screen width. |
| Absolute | Stays where the widget is placed, as wide as its container, and scrolls away with the page. |
With Fixed Position set to Top:
How It Behaves
- Open Mobile Menu is a maximum width. With 767, the bar shows on screens up to 767 px wide and is hidden from 768 px. It is one value for all devices.
- If Open Mobile Menu is empty, the bar shows on every screen, desktops included.
- A Fixed bar spans the full width of the screen, whatever the width of the container you placed it in.
Limitations
- A fixed bar sits on top of the page. Leave space at the bottom of your content so nothing important hides behind it.
- With Top, logged-in users see the WordPress toolbar over the bar until they scroll. Visitors are not affected.
- The default item icon does not show on the page. Choose an icon from the library for every item.
Troubleshooting
The bar also shows on desktop
Set Open Mobile Menu to a width such as 767.
The bar scrolls away
Position is set to Absolute. Change it to Fixed.
The items show text but no icons
Pick an icon for each item in Menu 1. The default icon is not displayed on the page.
