---
title: "How to Create a Sticky Menu in Elementor?"
url: https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/
date: 2023-10-27
modified: 2026-09-11
lang: en
author: "Aditya Sharma"
description: "A sticky menu stays at the top of the screen while visitors scroll, so your main links, search and buttons are always one click away. With the Navigation Menu widget..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Sticky-Menu-in-Elementor_-1024x536.jpg
word_count: 654
---

# How to Create a Sticky Menu in Elementor?

## 

- The Plus Addons for Elementor Navigation Menu widget turns on Sticky Menu in Content > Extra Options with one switch, and the header stays at the top as visitors scroll.
- The Plus Addons for Elementor Pro includes the sticky option, while Navigation Menu Lite does not have this feature.
- Sticky Menu fixes the container that holds the Navigation Menu widget, so the logo and buttons need to stay in the same container for the whole header to stick.
- On Mouse Scroll Up Sticky hides the header while visitors scroll down and brings it back when they scroll up, and Sticky Mobile Menu > Scroll Overflow lets a long mobile menu scroll on screens at or below the Open Mobile Menu width.

A sticky menu stays at the top of the screen while visitors scroll, so your main links, search and buttons are always one click away.

With the Navigation Menu widget from The Plus Addons for Elementor, you turn on a sticky header with one switch — no code needed.

*To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).*

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

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

Table Of Contents

## Before You Start

- **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A header template.** Add the widget to your site's header so the menu shows on every page. Build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type.

## Step 1: Build the header

Put the Navigation Menu widget in your header template, in the same container as your logo and buttons. Choose the **Menu Type**, **Menu Direction** and menu.

## Step 2: Turn on Sticky Menu

In **Content > Extra Options**, switch on **Sticky Menu**.

![The Sticky Menu switch in the Extra Options section](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-the-sticky-menu-switch-in-the-extra-options-section.webp)

Publish and scroll the page. The header now stays at the top.

## What Sticks, and When

- Sticky Menu fixes the **container (or outer section) that holds the Navigation Menu widget**, not just the widget. Everything in that container sticks with it, so keep your logo and buttons in the same container.- With Elementor’s older sections, the **outer** section sticks, even if the widget is in an inner section. With containers, the **closest** container sticks — if the widget sits in a container inside another one, only the inner one sticks.- The header sticks as soon as the page scrolls past the top of that container — for a header at the top of the page, that is the first scroll.- A placeholder of the same height takes its place, so the page below does not jump.

## Optional: Show It Only When Scrolling Up

Switch on **On Mouse Scroll Up Sticky**, just below Sticky Menu. The header then hides while visitors scroll down and slides back as soon as they scroll up. See [how to hide the header on scroll down](https://theplusaddons.com/docs/hide-header-on-scroll-down-effect-in-elementor/).

![On Mouse Scroll Up Sticky below Sticky Menu in Extra Options](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-scroll-up-sticky.webp)

## Style the Sticky Header

Turning on Sticky Menu adds two sections to the **Style** tab. Their settings only apply while the header is stuck:

| Section | Settings |
| ------- | -------- |
| Sticky Main Menu | Item padding, indicator and Normal / Hover / Active colours; **Section Background Options** with Normal and Sticky tabs, each with a Backdrop Filter; **Sticky Padding**; Sticky Width, Top, Container Alignment, Border Radius and Box Shadow |
| Sticky Mobile Menu | Mobile menu colours, and **Scroll Overflow** |

Guides: [change the colour on scroll](https://theplusaddons.com/docs/sticky-header-color-on-scroll/), [transparent sticky header](https://theplusaddons.com/docs/transparent-sticky-header-effect-in-elementor/), [blurred glass header](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/) and [shrinking header](https://theplusaddons.com/docs/shrinking-header-effect-in-elementor/).

## Limitations

- **Pro only.** Navigation Menu Lite has no sticky options.- **The editor does not scroll the page the way a visitor does. Check sticky effects on the published page.**

## Troubleshooting

### Only part of the header sticks

The widget is in a container inside another container, so only the inner one sticks. Move the logo and buttons into the same container as the menu, or move the menu into the outer container.

### The sticky colour never appears

If the header container has its own background (container > Style > Background), that background wins over the widget’s **Sticky** tab. Remove it and set the normal colour in **Style > Sticky Main Menu > Section Background Options > Normal** instead.

### A long mobile menu can’t be scrolled

Turn on **Style > Sticky Mobile Menu > Scroll Overflow**. It lets the stuck header scroll on screens at or below the Open Mobile Menu width.

## Related Docs

- [Navigation Menu widget: settings overview](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/)- [Hide the header on scroll down](https://theplusaddons.com/docs/hide-header-on-scroll-down-effect-in-elementor/)- [Change the sticky header colour on scroll](https://theplusaddons.com/docs/sticky-header-color-on-scroll/)

## Frequently Asked Questions

**Q: What do I need before I can create a sticky menu in Elementor?**
A: The sticky option is part of the Navigation Menu widget in The Plus Addons for Elementor Pro, so the free Navigation Menu Lite widget will not do it. You also need the widget enabled under The Plus Addons > Widgets, plus a header template where the menu can sit on every page. If you use the Default menu type, a WordPress menu under Appearance > Menus is part of the setup.

**Q: Why does only part of my header stick instead of the whole bar?**
A: Sticky Menu fixes the container that holds the Navigation Menu widget, not just the widget itself. If the menu sits inside a container nested within another container, only the inner one sticks. The clean fix is to keep the logo, buttons, and menu in the same container so the whole header behaves as one sticky block.

**Q: How do I make a sticky header appear only when scrolling up?**
A: The Navigation Menu widget includes an On Mouse Scroll Up Sticky option just below Sticky Menu. When it is on, the header hides while visitors scroll down and slides back into view when they scroll up. That pattern keeps navigation out of the way during reading but still easy to reach when someone changes direction.

**Q: Why does my sticky header colour not change on scroll?**
A: A background set on the header container can override the widget’s Sticky tab styling. In that case, the container background wins and hides the sticky colour change. The fix is to remove the container background and set the normal colour in Style > Sticky Main Menu > Section Background Options > Normal instead. That keeps the sticky state styling in control.

**Q: How do I make a long mobile sticky menu scroll properly?**
A: Style > Sticky Mobile Menu includes Scroll Overflow, which lets a stuck header scroll on screens at or below the Open Mobile Menu width. That matters when mobile navigation is taller than the viewport, because without overflow handling users can get trapped at the top of a long menu. Turning it on keeps all items reachable while the header stays fixed.

**Q: What are the main limitations of sticky menus in The Plus Addons for Elementor?**
A: The big limitation is edition-based: sticky options are Pro only, and Navigation Menu Lite does not include them. Another practical limit is that Elementor’s editor does not scroll like a real visitor session, so sticky behavior should be checked on the published page. The Plus Addons for Elementor by POSIMYTH provides this as part of its Pro Navigation Menu workflow.