--- 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-08-31 lang: en author: "Aditya Sharma" description: "A sticky menu keeps your navigation menu visible and pinned to the top of the page as visitors scroll, so people always have quick access to your main links without..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Sticky-Menu-in-Elementor_-1024x536.jpg word_count: 1052 --- # How to Create a Sticky Menu in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget turns on a sticky menu with a single toggle in the Extra Options tab, and it needs no custom code. - Sticky Menu fixes the header or menu bar to the top of the viewport after visitors scroll past it, so navigation stays visible on long pages. - On Mouse Scroll Up Sticky reveals the menu only when visitors scroll upward, and the post says it can feel brief delay of roughly the first 80px of scroll before settling. - Sticky Main Menu and Sticky Mobile Menu style tabs let The Plus Addons for Elementor control colors, background, and sizing separately for desktop and mobile while the menu is stuck. A sticky menu keeps your navigation menu visible and pinned to the top of the page as visitors scroll, so people always have quick access to your main links without scrolling back up. With the Navigation Menu widget from The Plus Addons for Elementor, you can turn on a sticky menu with a single toggle, no custom code needed. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](/docs/navigation-menu-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure its 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 ## 1. What It Does The Sticky Menu option in the Navigation Menu widget fixes your header or menu bar to the top of the viewport once a visitor scrolls past it, instead of letting it scroll away with the rest of the page. ## 2. Why It Matters Visitors who scroll deep into a long page still need a fast way back to your main navigation, search, or call-to-action button. A sticky menu removes the need to scroll back up, which keeps people engaged and reduces the clicks needed to move around your site. ## 3. What You Get - A one-click Sticky Menu switcher inside the widget's Extra Options tab- An On Mouse Scroll Up Sticky mode that reveals the menu only when a visitor scrolls upward- Dedicated Sticky Main Menu and Sticky Mobile Menu style tabs for separate desktop and mobile styling- Works with Horizontal, Vertical, and Vertical Side menu directions ## 4. Benefits - Keeps navigation, logo, and CTA buttons reachable on long pages without extra plugins- Improves usability on content-heavy pages such as blog posts and landing pages- Lets you style the sticky state differently from the normal state, for example a smaller logo or solid background on scroll ## 5. Capabilities - **Sticky Menu** switcher, found in the Extra Options tab, turns the fixed-position behavior on or off- **On Mouse Scroll Up Sticky** switcher, available once Sticky Menu is on, reverses the trigger so the menu appears on scroll up instead of scroll down- **Sticky Main Menu** style section (Style tab) controls colors, background, and sizing while the menu is stuck- **Sticky Mobile Menu** style section controls the same for the mobile breakpoint ## 6. How It Works When Sticky Menu is enabled, the widget attaches a fixed-position behavior to its wrapping section so the menu detaches from the normal document flow and stays pinned to the top of the viewport once its original position scrolls out of view. If On Mouse Scroll Up Sticky is also enabled, the widget listens for an upward scroll direction and only reveals the pinned menu on that scroll direction, keeping it hidden while scrolling down. ## 7. How to Use It To do this, add the Navigation Menu widget to the header template and follow the steps: > *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* - From the **Layout** and **Content** tabs, select the appropriate **Menu Type**, **Menu Direction**, and menu.- Then enable the **Sticky Menu** toggle from the **Extra Options** tab. ![Enabling the Sticky Menu toggle in the Extra Options tab of the Navigation Menu widget](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu-sticky-menu-new.png)Enabling the Sticky Menu toggle from the Extra Options tab Did you know? You can [create a swiper menu for mobile in Elementor.](https://theplusaddons.com/docs/create-a-swiper-menu-for-mobile-in-elementor/) Now you should have a sticky menu. Demo of the sticky menu pinning to the top of the page on scroll You can also reverse the effect by enabling the **On Mouse Scroll Up Sticky** toggle, which makes the menu sticky when users scroll up instead of down. Also, read [how to create a menu with repeater in Elementor](https://theplusaddons.com/docs/create-a-menu-with-repeater-in-elementor/). ## 8. Use Cases - Long-scroll landing pages where the CTA button in the header should always stay reachable- Blogs and documentation sites where readers need quick access to search or category links while reading- E-commerce sites where a persistent cart or account link improves checkout flow ## 9. Limitations - Sticky Menu is applied to the section or container the Navigation Menu widget sits in. If your logo or CTA button are separate widgets outside that section, they will not automatically become sticky along with the menu; they need to be placed inside the same sticky section or given matching sticky settings of their own.- Sticky positioning depends on the layout element used to wrap the header. Elementor's newer Container layout and the older Section and Column layout can behave differently with fixed positioning, so test sticky behavior after switching layout types.- On Mouse Scroll Up Sticky triggers based on scroll direction and a scroll distance threshold; on very short pages, or pages with fast auto-scroll interactions from other plugins, the trigger point can feel less precise. ## 10. Troubleshooting The issues below are sourced from real support tickets on this feature (via FluentSupport) and disclosed here as reported by users, not guaranteed to affect every setup. - **Sticky Menu toggle only sticks the menu bar, not the logo or CTA next to it (FluentSupport ticket #15934).** This happens when the logo and CTA are separate widgets placed outside the section that has Sticky Menu enabled. Fix: place the Navigation Menu, logo, and CTA widgets inside the same section or container, and enable Sticky Menu at that wrapping section level.- **Sticky menu color or background does not change on scroll even though a different color is set for the sticky state (FluentSupport ticket #12666).** This usually means the color was set on the wrong style tab. Confirm the color is set under the Sticky Main Menu (or Sticky Mobile Menu) style section, not the Normal state section, and that Sticky Menu is enabled first, since that style section only appears once it is on.- **Sticky behavior stops working after switching to Elementor's newer Container layout (FluentSupport ticket #13036).** Sticky positioning is applied to the wrapping layout element. If a header built with Elementor Sections and Columns is converted to Containers, rebuild the sticky test after the conversion and reapply the Sticky Menu toggle if the fixed positioning does not carry over.- **On Mouse Scroll Up Sticky flickers or engages briefly before settling into the correct behavior (FluentSupport ticket #13841).** This has been reported as a short delay of roughly the first 80px of scroll before the intended scroll-up-only behavior takes over smoothly. If this is disruptive, test with a taller sticky trigger offset or report the exact scroll distance to support for your specific site.