---
title: "How to Create a Sticky Bottom Mobile Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-sticky-bottom-mobile-menu-in-elementor/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Sticky-Bottom-Mobile-Menu-in-Elementor_-1024x536.jpg
word_count: 558
---

# How to Create a Sticky Bottom Mobile Menu in Elementor?

## 

- The Plus Addons for Elementor Mobile Menu widget creates a sticky bottom bar with Position set to Fixed and Fixed Position set to Bottom, and it stays pinned while the page scrolls behind it.
- Open Mobile Menu sets the widest screen that shows the bar, with 767 showing it up to 767 px and hiding it from 768 px; if the field is empty, the bar shows on every screen, desktops included.
- Menu 1 and Menu 2 in Style 2 use icon or image, Text, and Link items, and the post notes that the default item icon does not show on the page so each item needs an icon from the library.

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](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/mobile-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## 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](https://nexterwp.com/docs/nexter-theme-builder-explained/)) 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.

![Position set to Fixed in the Mobile Menu section, with the menu bar pinned to the bottom of the canvas](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-position.webp)

- Set **Fixed Position** to **Bottom** (also the default). Choose **Top** to pin the bar to the top of the screen instead.

![Fixed Position set to Bottom in the Mobile Menu section of the widget](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-fixed-position.webp)

- 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 Mobile Menu set to 767 in the Mobile Menu section, with the editor in mobile preview](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-open-mobile-menu.webp)

- 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:

![Sticky bottom mobile menu on a phone with Home, Shop, Wishlist and Account items over the page content](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-bottom.webp)

## 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**:

![Mobile menu bar pinned to the top of a phone screen over the page text](https://theplusaddons.com/wp-content/uploads/2026/09/mobilemenu-result-top.webp)

## 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.

## Related Docs

- [Mobile Menu widget settings overview](https://theplusaddons.com/docs/mobile-menu-widget-settings-overview/)- [Create a split mobile menu](https://theplusaddons.com/docs/create-a-split-mobile-menu-in-elementor/)- [Add a menu toggle button in an Elementor header](https://theplusaddons.com/docs/add-elementor-menu-toggle-button-in-header/)

## Frequently Asked Questions

**Q: How do I keep a mobile menu stuck to the bottom of the screen in Elementor?**
A: Set the Mobile Menu widget to Fixed and keep Fixed Position on Bottom. That combination pins the bar to the bottom edge of the screen and keeps it there while the page scrolls behind it. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH provides this behavior through the Mobile Menu widget’s Position setting, so it works like a phone app navigation bar instead of a normal page block.

**Q: What screen width should I use so the bottom menu only shows on phones?**
A: Use Open Mobile Menu as a maximum width, not a breakpoint range. A value like 767 shows the bar on screens up to 767 px wide and hides it from 768 px upward. That makes it a clean phone-only menu without needing separate device logic. If you leave Open Mobile Menu empty, the bar appears on every screen, including desktop.

**Q: Why is my sticky bottom menu showing on desktop too?**
A: That usually means Open Mobile Menu is empty. The widget treats that field as the maximum width for display, so without a value it shows everywhere. Setting it to something like 767 limits the bar to phone-sized screens and keeps desktop layouts clean. The Plus Addons for Elementor Mobile Menu widget uses one value for all devices, so this is the main control for visibility.

**Q: Why does my mobile menu scroll away instead of staying fixed?**
A: The bar scrolls away when Position is set to Absolute. Absolute keeps the widget where it sits in the layout, so it moves with the page content. Switching Position to Fixed makes it stay in place while scrolling. If you want a bottom navigation that behaves like an app bar, Fixed is the setting that matters.

**Q: What should I know before using a fixed bottom menu on a page?**
A: A fixed bar sits on top of the page content, so important text or buttons can end up hidden behind it if you do not leave space at the bottom of your content. With Top, logged-in users also see the WordPress toolbar above the bar until they scroll, while visitors do not. That makes spacing and user state worth thinking about before publishing.

**Q: Why do my menu items show text but no icons?**
A: The default item icon does not appear on the page. Each item in Menu 1 needs an icon chosen from the library, otherwise you can end up with text-only entries even though an icon placeholder exists in settings. For Style 2, Menu 2 also needs its own items filled in with icon or image, text, and link.