How to Edit Navigation Bar in WordPress Elementor

A navigation menu is often the first interactive element a visitor uses when they land on your site. If it is hard to read, poorly organized, or missing key links, people leave. A well-structured nav menu guides users through your site in a logical way, helping them find your products, services, or content without guessing. This directly affects how long people stay on your site and whether they take action. Beyond user experience, navigation structure also plays a role in how search engines crawl your site. Clear, shallow navigation makes it easier for Google to discover and index all your important pages. If key pages are buried three or four levels deep with no clear path from the homepage, they may never get properly crawled. Building a strong navigation system from the start is one of the simplest ways to improve both SEO and user engagement at once.

Before you start building, it helps to understand what tools are available to you. The default WordPress menu editor under Appearance > Menus is simple and works for basic needs. It lets you add pages, posts, custom links, and categories, and you can arrange them in a hierarchy. The downside is that it offers almost no styling options, so your menu will look exactly how your theme dictates. Elementor Pro includes the Nav Menu widget, which gives you full control over layout, typography, colors, and responsive behavior directly inside the Elementor editor. This is the most popular option for Elementor users because it integrates with Elementor’s design system. If you are on the free version of Elementor, there are third-party plugins like Max Mega Menu or WP Mega Menu that add more styling and behavior options to the standard WordPress menu. Each option has trade-offs, but for anyone already using Elementor Pro for their site design, the built-in Nav Menu widget is the cleanest and most consistent choice.

Creating a navigation bar with Elementor involves two separate systems working together, and understanding how they connect will save you a lot of troubleshooting time.

The first thing to confirm before you start: the Nav Menu widget is only available in Elementor Pro. It does not ship with the free version of Elementor. If you open your Elementor widget panel and cannot find Nav Menu, your license is the reason. Elementor Free users do have an alternative, though it is more limited. You can use the HTML widget to paste a custom menu structure manually, or you can rely on WordPress’s own default menu rendering through your active theme. Neither option gives you the same visual controls as the Pro widget, but they do let you display a functional navigation bar without upgrading.

For everyone on Elementor Pro, the correct workflow is to build your menu in WordPress first, then display it via Elementor. Go to Appearance > Menus, create your menu, add your pages and links, set the structure, and save. Only after that should you open Elementor and drop the Nav Menu widget onto your header or page. The widget will pull in whatever menus you have saved in WordPress.

This separation of content from presentation is intentional and worth respecting. When you need to add a new page to your navigation later, you only update the WordPress menu. Elementor picks up the change automatically without you needing to open and republish the template. If you had built your menu items directly inside Elementor (which some builders allow), every change would require editing the Elementor template itself.

You also have a choice about where the Nav Menu widget lives. The most common approach is to add it inside a Theme Builder Header template in Elementor Pro, which applies the header site-wide. Alternatively, you can place the Nav Menu widget directly on a specific page if you only want custom navigation in one location. The Theme Builder route is the right choice for most sites because it means one edit updates every page at once.

Log in to your WordPress dashboard and go to Appearance, then click on Menus in the sidebar. If you have never created a menu before, you will see an option to create a new one at the top of the screen. Type a name for your menu in the Menu Name field. Use something descriptive like “Main Navigation” or “Primary Menu” so you can identify it later, especially if you plan to create multiple menus for different parts of your site. Once you have entered a name, click the “Create Menu” button. WordPress will save a blank menu with that name, and you will be taken to the edit screen where you can start adding items to it. At the bottom of the page, you will also see a “Menu Settings” section with checkboxes for automatic page additions and menu locations. You can configure these later, but it is worth noting they are there before you move on to adding items.

On the left side of the Menus screen, you will see panels for Pages, Posts, Custom Links, and Categories. Expand any panel to see available items, then check the boxes next to what you want to include and click “Add to Menu.” Pages and posts you have already published will appear here, and you can add as many as you need. Custom Links are useful for adding external URLs or custom paths, like a link to a contact form landing page or an affiliate URL. Once items are added, they appear as blocks in the menu structure area on the right side of the screen. You can reorder them by dragging and dropping, and you can create dropdown submenus by dragging an item slightly to the right so it sits underneath a parent item. Each item also has an edit arrow on the right side that opens additional settings, such as changing the display label, adding a title attribute, or setting a CSS class for custom styling. Take time to organize your menu items in a way that reflects how your visitors would logically want to explore the site.

The drag-and-drop interface in WordPress Menus makes it straightforward to rearrange items and build a hierarchy. To reorder items at the same level, just drag them up or down in the list. To create a nested dropdown item, drag a menu item to the right until it indents under the item above it. That indented item will then appear as a dropdown option when a user hovers over or clicks the parent item on the frontend. You can nest items two or three levels deep, though it is generally better to keep your menu structure as flat as possible. Very deep nesting confuses visitors and can be hard to use on mobile devices. A good rule of thumb is to keep no more than one or two levels of dropdowns and to limit the number of top-level items to between five and seven. After you have organized the structure the way you want, you are ready to save and assign the menu to a location.

Before you save, scroll down to the “Menu Settings” section at the bottom of the Menus screen. You will see checkboxes under “Display location” that correspond to the theme menu positions, such as Primary Menu, Footer Menu, or Social Links. Check the location where you want this menu to appear. If you are using Elementor to control your header, you may not need to assign a location here at all, since Elementor’s Nav Menu widget pulls the menu by name rather than by location. However, assigning a location is still useful as a fallback and for non-Elementor pages. Once you have made your selections, click the big blue “Save Menu” button in the top right corner of the screen. Your menu is now saved and ready to be used in Elementor. Any changes you make to the menu items later, like adding new pages or removing old ones, will automatically appear in Elementor without needing to reconfigure the widget.

Open the Elementor editor on the page or template where you want your navigation to appear. For most sites, this will be a Header template in Elementor’s Theme Builder under Templates > Theme Builder > Header. Inside the editor, look at the widget panel on the left side and type “Nav Menu” into the search bar. The Nav Menu widget will appear in the results. Drag it into the section of your header where you want the menu to sit. Once it is placed, go to the Content tab in the left panel and find the “Menu” dropdown. This dropdown lists all the menus you have created in WordPress, so select the one you built in the earlier steps. The menu items should appear immediately in the editor preview. If your header layout uses a row with a logo on one side and the menu on the other, make sure the Nav Menu widget is inside the correct column before moving on to styling.

With the Nav Menu widget selected, click on the Style tab in the Elementor panel. This is where you can control everything from font size and color to hover effects and dropdown appearance. Under the “Main Menu” section, you can set the typography, text color, and background color for the top-level items. The “Hover” and “Active” state options let you choose a different color or underline effect when a visitor hovers over or is on a specific page. Scroll down to the Dropdown settings to control how submenu items look, including their background color, padding, and text alignment. The Layout tab in the Content section lets you switch between a Horizontal layout for desktop and a Vertical layout if needed, and you can also control the breakpoint at which the menu switches to a mobile hamburger icon. The Toggle section controls the style of the hamburger button itself, including its color, size, and background. Always check how the menu looks on tablet and mobile by using Elementor’s responsive preview buttons at the bottom of the screen. Once you are satisfied with the styling, click Publish or Update to make the changes live.