---
title: "How to Create a Sticky Bottom Mobile Menu in WordPress?"
url: https://nexterwp.com/docs/create-a-sticky-bottom-mobile-menu-in-wordpress/
date: 2024-12-02
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "On a phone the bottom of the screen is where the thumb already is, which is why apps put navigation there. Setting the position to fixed and bottom pins the..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Sticky-Bottom-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 419
---

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

## Key Takeaways

- Nexter Blocks Mobile Menu block creates a sticky bottom mobile menu directly in the WordPress block editor (Gutenberg).
- Fixed and Bottom position settings lock the menu bar to the screen and move it to the bottom edge, creating the sticky bottom effect on mobile.
- Open Mobile Menu uses a screen width breakpoint so the sticky bottom menu appears only on mobile devices and does not interfere with the desktop layout.

On a phone the bottom of the screen is where the thumb already is, which is why apps put navigation there.

Setting the position to fixed and bottom pins the bar there while the page scrolls behind it.

*For every Mobile Menu setting in one place, see the [Mobile Menu block guide](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/builder/wordpress-mobile-menu/)

## Before You Start

- **Edition:** **Pro** — the Mobile Menu block is part of Nexter Blocks Pro.- **Block to enable:** Mobile Menu, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Your menu items decided:** four or five is the usual limit before a phone bar gets crowded.

## Steps

- Add the **Mobile Menu** block to your page or template and click **Design from Scratch**.

- In the **Mobile Menu** panel, add your items — each one takes a label, an icon or image, and a link.

![The Mobile Menu panel with Style and the item list](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-style.webp)

- Set **Open Mobile Menu(px)** to the width below which the menu should appear.

![The Open Mobile Menu(px) breakpoint setting](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-breakpoint.webp)

- Set **Position** to the fixed option and choose **Bottom**.

![The Position setting with fixed and bottom](https://nexterwp.com/wp-content/uploads/2026/09/mobile-menu-position.webp)

- Check the bar against your page — a fixed bar covers the bottom of the screen permanently.

- Publish and scroll the page on a phone to confirm the bar stays put.

> ***Open Mobile Menu(px)** is a maximum width, not a minimum — the menu appears on screens narrower than the number and stays hidden above it.*

## How It Behaves

- With fixed and bottom the bar has `position: fixed` and sits flush with the bottom of the screen — measured at exactly the viewport height on a 844 pixel tall phone screen.- The page scrolls behind it, so the bar is always reachable.- The same setting offers **Top**, which pins the bar to the top instead.- Choosing absolute instead leaves the bar in the page, scrolling away with the content.

## Limitations

- **Pro only.**- A fixed bottom bar permanently covers part of the screen. Add bottom padding to your page so the last of your content is not hidden behind it.- It can collide with a phone browser's own bottom toolbar, so test on a real device.- Two fixed bars, such as this and a cookie notice, quickly eat the screen.

## Troubleshooting

### The bar scrolls away with the page

**Position** is set to absolute. Switch it to the fixed option and choose **Bottom**.

### The last part of my content is hidden behind the bar

Add bottom padding to the page or template roughly equal to the bar's height.

### The bar sits at the top instead

The fixed position is set to **Top**. Change it to **Bottom**.

## Related Docs

- [Mobile Menu block: all settings](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/)- [Split mobile menu](https://nexterwp.com/docs/create-a-split-mobile-menu-in-wordpress/)- [Swiper mobile menu](https://nexterwp.com/docs/create-a-swiper-mobile-menu-in-wordpress/)