---
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-06-14
author: "Aditya Sharma"
description: "Do you want to create a sticky bottom mobile menu in WordPress? A sticky bottom mobile menu keeps navigation visible at all times, which is especially helpful on long-scrolling mobile..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-a-Sticky-Bottom-Mobile-Menu-in-WordPress_-1024x519.jpg
word_count: 336
---

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

Do you want to create a sticky bottom mobile menu in WordPress? A sticky bottom mobile menu keeps navigation visible at all times, which is especially helpful on long-scrolling mobile pages.

With the Mobile Menu block from Nexter Blocks, you can create a sticky bottom mobile menu directly in the WordPress block editor (Gutenberg).

*To check the complete feature overview documentation of the Nexter Blocks Mobile Menu block,* [*click here*](https://nexterwp.com/docs/add-a-mobile-menu-in-wordpress/).

**Best Used For:**

- Mobile-first sites and landing pages where bottom-pinned navigation improves one-handed browsing

- WooCommerce stores where you want persistent category or cart access on mobile

- Blogs and news sites with long-scrolling content where the header menu scrolls out of reach

**Requirement** — This block is a part of Nexter Blocks. Make sure it is installed and activated.

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

To do this, add the Mobile Menu block to the header template and follow the steps below.

> *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)*.*

1. After selecting the appropriate style from the **Style** section, select **Fixed** from the **Position** dropdown. This locks the menu bar to a fixed position on screen so it does not scroll away with the page content.

![Mobile Menu block Position Fixed setting in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-style-1-position-fixed.gif)

2. Then, from the second **Position** section, select **Bottom**. This moves the fixed menu bar to the bottom edge of the screen, creating the sticky bottom effect on mobile.

3. In the **Open Mobile Menu** section, add your desired screen width breakpoint so the sticky bottom menu only appears on mobile devices and does not interfere with the desktop layout.

4. Create the menu from the **Main Menu** and **Right Menu** tabs based on the style you selected in the **Mobile Menu** tab.

Your mobile menu will now stick to the bottom of the screen as visitors scroll.

To add a transparent or sticky header for desktop visitors alongside your mobile menu, see [How to Add a Transparent Header in WordPress with Nexter](https://nexterwp.com/docs/add-a-transparent-header-in-wordpress/).

For a standard navigation menu setup, see [How to Add a Navigation Menu in WordPress](https://nexterwp.com/docs/add-a-navigation-menu-in-wordpress/).

![Sticky bottom mobile menu demo in Nexter Blocks](https://nexterwp.com/wp-content/uploads/2024/12/mobile-menu-layout-style-1-position-fixed-demo.gif)