Elementor Navigation Menu: Every Setting Explained

Elementor’s Nav Menu widget looks simple until you open its three tabs and find eleven separate settings groups hiding inside Content, Style, and Advanced. Most builders use maybe a third of what is actually there, then reach for a second plugin to solve a problem the widget already handles on its own.

The widget itself has no sticky setting; making the header it lives in sticky is a separate step, and worth checking with mobile-specific testing once it is set up.

Every elementor navigation menu setting covered here lives inside one of the widget’s three tabs: Content, Style, or Advanced.

This is a full pass through every setting in the Nav Menu widget: what each one does, which tab it lives in, and where the widget’s job stops so you know exactly when you need something else, like a mega menu widget or a dedicated sticky-header plugin.

Key Takeaways

• The Nav Menu widget pulls from a WordPress menu you build under Appearance, not from a menu built inside Elementor itself.
• Dropdown direction, mobile breakpoint, and hamburger icon style are three separate settings, each with its own default that frequently surprises first-time users.
• The widget has no sticky setting and no scroll-effect settings of any kind. That is Elementor Pro’s Theme Builder or a dedicated plugin’s job, not the Nav Menu widget’s.
• A true multi-column mega menu is outside this widget’s scope. It supports single-column dropdown submenus only.
• Every layout, style, and mobile setting can be adjusted per breakpoint under the responsive icon at the top of each control.

Where the Nav Menu Widget Gets Its Content

The Content tab’s first setting is Menu, a dropdown that pulls in every menu you have already built under Appearance > Menus in wp-admin. Elementor does not let you build menu structure inside the widget itself; it only renders a WordPress menu you have already assigned items to.

If the dropdown is empty, no WordPress menu exists yet. Create one in Appearance > Menus first, add at least one page or custom link, then return to the widget and select it. This single dependency is the most common reason a Nav Menu widget appears to do nothing at all.

Layout: Layout Type, Alignment, and Dropdown Direction

The Layout setting switches the whole menu between Horizontal and Dropdown display. Horizontal lays every top-level item in a row; Dropdown collapses the entire menu behind a single toggle icon, which some builders use even on desktop for a minimal header look.

Pointer controls the hover style on top-level items (None, Underline, Overline, Double Line, Framed, or Background), and Submenu Indicator adds or removes the small arrow that marks an item with children. Dropdown Direction, easy to miss, sets whether submenus open left or right of the parent item, which matters most for menu items near the edge of the header.

Style Tab: Typography, Spacing, and Hover Color States

The Style tab splits into Main Menu and Dropdown sections, each with its own typography, color, and spacing controls. Main Menu color states cover Normal, Hover, and Active separately, so a visited or current-page item can carry a different color than an item the visitor is simply hovering over.

Item Spacing controls the horizontal gap between top-level items, and Divider adds a vertical line between them with its own width, color, and height controls. Dropdown styling repeats most of the same options (background, typography, spacing, borders) scoped only to the submenu panel, which is why a dropdown can look completely different from the top-level bar above it.

Submenus and Dropdown Behavior

Any menu item with children in your WordPress menu automatically becomes a dropdown trigger. Elementor’s Nav Menu widget supports one level of visual nesting cleanly; a second nested level still renders but gets harder to style and to use on a touchscreen, since a visitor has to hover or tap through two flyouts in sequence.

This is also the widget’s honest boundary. A true mega menu, meaning a multi-column dropdown with images, categories, or independent content blocks per item, is not something the Nav Menu widget builds. That needs a dedicated mega-menu widget, either from a third-party addon pack or a standalone mega-menu plugin, built on top of the same underlying WordPress menu structure.

Mobile Settings: Breakpoint, Icon, and Full Screen Behavior

The Mobile section of the Content tab sets the exact breakpoint (in pixels) where the horizontal menu collapses into the toggle icon, separately from Elementor’s global responsive breakpoints if you choose a custom value. Below that width, the widget swaps to a hamburger, a set of three dots, a plus sign, or a text label you write yourself.

Full Screen controls whether the opened mobile menu covers the entire viewport or drops down as a smaller panel under the header. A full-screen mobile menu gets its own background, alignment, and close-icon styling, all separate from the desktop dropdown styling above it, so testing the mobile state on an actual phone width (not just a narrowed desktop browser) is worth the two extra minutes it takes.

Planning Menu Structure Before You Style Anything

The most common source of a messy-looking Elementor menu is not a style setting at all; it is a WordPress menu built without planning nesting depth first. Decide which top-level items truly need a dropdown and which do not before adding a single child item, since every dropdown adds a hover or tap step a visitor has to complete.

A flat, five-to-seven-item top-level menu with one level of dropdowns at most tests better for usability than a deeply nested structure, across most site types. If your content genuinely needs more than two levels of hierarchy, that is usually a sign the site needs a mega menu widget rather than a deeper Nav Menu dropdown, since a third-level flyout is where usability drops sharply on both desktop and mobile.

What the Nav Menu Widget Does Not Do

Worth stating plainly: the Nav Menu widget has no sticky setting anywhere in its own Advanced tab, and no scroll-triggered behavior of any kind, background change, shrink, hide on scroll, or otherwise. Making the header that contains this widget stick to the top of the screen is a separate decision made at the header container level, not inside the menu widget itself.

On Elementor Pro, that sticky control lives in the Theme Builder’s header template settings, as a basic on or off toggle. On Elementor Free, there is no native sticky setting at all, and a dedicated plugin like Sticky Header Effects for Elementor is the route, adding both the sticky behavior and 10 free scroll effects (shrink, background color change, hide on scroll down, and more) on top of whatever Nav Menu widget layout you already built, on either Elementor tier.

Frequently Asked Questions

Why is my Nav Menu widget showing nothing? The Menu dropdown in the Content tab has no WordPress menu selected, or the selected menu has no items yet. Build the menu under Appearance > Menus first.

Can I build a mega menu with this widget? Not a true multi-column one. The Nav Menu widget supports single-column dropdown submenus; a real mega menu needs a dedicated mega-menu widget.

Does the Nav Menu widget support sticky behavior on scroll? No. Sticky positioning and scroll effects are handled at the header level, either by Elementor Pro’s Theme Builder or by a dedicated plugin such as Sticky Header Effects for Elementor, which works on Elementor Free or Pro.

For the underlying browser mechanics behind menu positioning and stacking, MDN’s CSS position reference is the primary source, and Elementor’s own help center documents the Nav Menu widget’s full control list as Elementor updates it. Once your menu and header layout are finished, the 21 Sticky Header Effects and the documentation for Sticky Header Effects for Elementor cover the scroll behavior the widget itself does not.