--- title: "Navigation Menu Widget Settings Overview" url: https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/ date: 2023-10-27 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "The navigation menu is how visitors find their way around your site. A clear menu that works the same on desktop and mobile keeps people moving to the pages you..." image: https://theplusaddons.com/wp-content/uploads/2023/10/Navigation-Menu-Widget_-Settings-Overview-1024x536.jpg word_count: 1005 --- # Navigation Menu Widget Settings Overview ## - The Navigation Menu widget in The Plus Addons for Elementor builds horizontal, vertical and side menus, mega menus, sticky headers and three kinds of mobile menu from one widget. - The widget is part of The Plus Addons for Elementor Pro, and it is activated under The Plus Addons > Widgets before use. - Sticky Menu fixes the container that holds the Navigation Menu widget, so the logo and buttons stay stuck with the menu while visitors scroll. - Responsive Mobile Menu is on by default, with Toggle, Swiper and Off Canvas options, and Open Mobile Menu defaults to 991px. The navigation menu is how visitors find their way around your site. A clear menu that works the same on desktop and mobile keeps people moving to the pages you want them to see. The **Navigation Menu** widget in The Plus Addons for Elementor builds horizontal, vertical and side menus, mega menus, sticky headers and three kinds of mobile menu, all from one widget. ***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) ## Before You Start - **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro.- **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.- **Free alternative:** the free plugin has **Navigation Menu Lite**. It has horizontal and vertical menus, hover or click dropdowns, the Repeater menu with mega menu templates and a toggle mobile menu. It has no Vertical Side Menu, no sticky options and no Swiper or Off Canvas mobile menu. ## Learn via Video Tutorial https://www.youtube.com/watch?v=ozRGPdEu9qQ ## How to Activate the Navigation Menu Widget Go to **The Plus Addons > Widgets**, search for **Navigation Menu** and turn on its switch. ![Turning on the Navigation Menu widget in The Plus Addons widget settings](https://theplusaddons.com/wp-content/uploads/2023/10/navigation-menu.png) ## Where to Use It Put the widget in your header template so the menu appears on every page. You can build the header with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro’s Theme Builder. ## Layout **Menu Type** decides where the menu items come from: - **Default** — a WordPress menu from **Appearance > Menus**.- **Repeater** — items you add inside the widget, each with its own level, icon, label and optional mega menu template. See [how to create a menu with the repeater](https://theplusaddons.com/docs/create-a-menu-with-repeater-in-elementor/). **Menu Direction** is a row of three pictures — **Horizontal Menu**, **Vertical Menu** and **Vertical Side Menu**, in that order. Hover over a picture to see its name. ![The three Menu Direction pictures in the Layout section](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-menu-direction.webp) - **Horizontal Menu** — items in a row, dropdowns open below.- **Vertical Menu** — items in a column, dropdowns open to the side.- **Vertical Side Menu** — a column with an optional title bar that can open the menu on hover or click. **Alignment** places the menu left, centre or right. ## Content What you see here depends on the menu type. - **Select Menu** (Default type) — the WordPress menu to show.- **Navigation Menu** (Repeater type) — the list of items.- **Menu Hover/Click** — **Hover Sub-Menu** (default) or **Click Sub-Menu**.- **Menu Effects** — how dropdowns appear: **Slide Up/Down (JS)**, **Fade In/Out (JS)**, **Fade Up/Down** or **Fade In/Out**. A Vertical Menu only uses the first two.- **Open Direction**, **Vertical Side Title Bar** and the title bar settings — Vertical Side Menu only. ## Extra Options **Sticky Menu** keeps the header at the top of the screen while visitors scroll. **On Mouse Scroll Up Sticky** then hides it on the way down and brings it back on the way up. 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. ![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) ## Mobile Menu **Responsive Mobile Menu** is on by default. Its **Menu Type** has three options: - **Toggle** — a button that opens the menu as a dropdown panel.- **Swiper** — no button; the top-level items sit in a row visitors swipe sideways. Submenus are not shown.- **Off Canvas** — a button that slides the menu in from the side. **Open Mobile Menu** (default 991px) is the *widest* screen that gets the mobile menu. At that width and narrower, visitors see the mobile menu; wider screens get the normal menu. ![Mobile Menu Type and Open Mobile Menu in the Mobile Menu section](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-mobile-menu-type.webp) **Menu Content** chooses **Normal Menu** (a WordPress menu, picked in **Select Menu**) or **Template Menu** (an Elementor template). The template picker is not available for Off Canvas. **Mobile Click Close Menu** is meant to close the open menu when visitors tap elsewhere; see Limitations. ## How to Style the Navigation Menu Widget The **Style** tab has these sections: | Section | What it styles | | ------- | -------------- | | Outer Navigation | Padding, minimum width, background, radius and shadow of the whole menu | | Vertical Side Title Bar | The title bar of a Vertical Side Menu | | Main Menu | Top-level items: padding, typography, indicator, Normal / Hover / Active colours | | Sticky Main Menu | Top-level items and the header background *while the header is stuck*. Only shown when Sticky Menu is on | | Sub Menu | Dropdown items and the dropdown box | | Description | Item descriptions | | Mobile Menu | The toggle button and the mobile menu | | Sticky Mobile Menu | Mobile menu colours while stuck, and Scroll Overflow | | Main & Sub Menu Label | Labels added to Repeater items | | Mobile Menu Label | Labels in the mobile menu | | Extra Options | Hover effects, the hover inverse effect, and opening the last items’ submenus to the left | ![The Style tab sections of the Navigation Menu widget](https://theplusaddons.com/wp-content/uploads/2026/09/tpae-the-style-tab-sections-of-the-navigation-menu-widget.webp) The Advanced tab is the same as on other widgets. [See the Advanced tab tutorial](https://docs.posimyth.com/tpae/advanced-tab/). ## Limitations - **Pro only.** The free plugin has the smaller Navigation Menu Lite instead.- **Hover dropdowns need a screen wider than 991px.** The hover script only runs above 991px. If you lower Open Mobile Menu, tablets between that width and 991px see the desktop menu, but hover dropdowns do not open there. Use Click Sub-Menu, or keep Open Mobile Menu at 991px.- **Mobile Click Close Menu** only closes the menu when the tap lands on the header around the menu, not on the page content below it.- **The dropdown arrows and the Off Canvas close button use Font Awesome 5.** If nothing else on the page loads Font Awesome, they show as empty boxes, or not at all. ## Troubleshooting ### Appearance > Menus is missing Block themes such as Twenty Twenty-Five hide the Menus screen. Use the **Repeater** menu type, or a classic theme such as Nexter or Hello Elementor. ### The menu is empty With the Default type, pick a menu in **Content > Select Menu**. With Repeater, add items. For the mobile menu, also pick a menu in **Mobile Menu > Select Menu**. ## Related Docs - [Create a mega menu](https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/)- [Create a sticky menu](https://theplusaddons.com/docs/create-a-sticky-menu-in-elementor/)- [Create a toggle menu for mobile](https://theplusaddons.com/docs/create-a-toggle-menu-for-mobile-in-elementor/)- [Create a menu with the repeater](https://theplusaddons.com/docs/create-a-menu-with-repeater-in-elementor/) ## Frequently Asked Questions **Q: How do I create a navigation menu in Elementor free?** A: The free plugin only gives you Navigation Menu Lite, not the full Navigation Menu widget. That lite version still covers horizontal and vertical menus, hover or click dropdowns, the Repeater menu with mega menu templates, and a toggle mobile menu. The full widget is Pro only, so if you need Vertical Side Menu, sticky options, or Swiper and Off Canvas mobile menus, that is the upgrade path in The Plus Addons for Elementor by POSIMYTH. **Q: How do I add a submenu in WordPress Elementor?** A: Submenus in this widget come from the menu type you choose. With Default, the submenu comes from a WordPress menu under Appearance > Menus. With Repeater, each item can have its own level and optional mega menu template. The practical gotcha is on mobile: hover dropdowns need screens wider than 991px, so Click Sub-Menu is the safer choice when you want submenus to work below that breakpoint. **Q: How do I edit a menu in Elementor?** A: The menu content is controlled in the widget settings, not by editing page text. Default menus pull from a WordPress menu selected in Content > Select Menu, while Repeater menus are edited item by item inside the widget. That split matters because Default is better for sitewide WordPress navigation, while Repeater is better when you want labels, icons, levels, and optional mega menu templates managed directly in The Plus Addons for Elementor. **Q: Can I use the Elementor navigation menu in my header on every page?** A: Putting the widget in a header template is the intended setup, because that makes the menu appear on every page. The page says you can build that header with the free Nexter Builder or with Elementor Pro’s Theme Builder. That placement matters more than most people think: if the menu lives outside the header template, it will not behave like a sitewide navigation bar. **Q: What is the best mobile menu type for an Elementor navigation menu?** A: The right choice depends on how visitors should interact with it. Toggle opens a dropdown panel with a button, Swiper shows top-level items in a sideways swipe row with no submenus, and Off Canvas slides the menu in from the side. Open Mobile Menu defaults to 991px, so anything at that width and below switches to mobile behavior. For deeper navigation, Toggle or Off Canvas makes more sense than Swiper. **Q: Why is my Elementor navigation menu empty?** A: An empty menu usually means the widget has no source selected or no items added. With Default type, pick a WordPress menu in Content > Select Menu. With Repeater type, add items inside the widget. Mobile can also look empty if its own source is unset, because Mobile Menu > Select Menu controls that version separately. In practice, desktop and mobile can be configured differently, so both need checking.