How to Create Mobile Menu in Elementor

Navigation is how visitors move around your site. On a desktop, a horizontal menu works fine. On a phone, that same menu collapses into a hamburger icon, a three-line button that opens a full dropdown when tapped. If this transition does not work properly, visitors cannot navigate and leave.

The scale of this problem matters. According to Statcounter, mobile devices account for over 60% of global web traffic as of 2024, and that share rises even higher in markets like South Asia and sub-Saharan Africa. A menu that works on desktop but breaks on mobile means the majority of your visitors encounter a broken experience.

Google uses mobile-first indexing, which means it evaluates and ranks your site based on how it looks and works on mobile, not desktop. A mobile menu that fails or does not display correctly sends a negative signal that affects your position in search results.

What exactly does Google check during a mobile crawl? It renders your page using a smartphone user agent (Googlebot Smartphone), with a typical viewport of 360 to 414 pixels wide. It checks whether interactive elements like menus are accessible without horizontal scrolling, whether tap targets meet minimum size requirements, and whether the page responds correctly to touch input. If your hamburger icon is there but cannot be tapped because it is too small or overlapped by another element, Google sees that as a usability failure.

There are practical consequences too:

• If the menu does not open on tap, users cannot reach product pages, contact forms, or other key destinations
• A broken navigation increases your bounce rate, which is a signal Google uses to evaluate page quality
• Core Web Vitals include Interaction to Next Paint (INP), which measures how quickly your site responds to a tap. A sluggish or broken menu hurts that score directly. Google’s threshold for a good INP is under 200 milliseconds.
• Mobile users have less patience than desktop users. If navigation takes more than one or two taps to locate, they leave.

Common ways mobile menus fail in practice include: the hamburger icon renders at a size below 44×44 pixels (the minimum tap target size recommended by both Apple’s Human Interface Guidelines and Google’s accessibility standards), the dropdown opens but overlaps the page content without a background color, the menu items are spaced too closely together for reliable tapping, or the close button is missing entirely so users cannot dismiss the open menu. Each of these is a design problem, not a technical one, but all of them show up as usability issues in Google’s mobile evaluation.

Accessibility is tied directly to this. WCAG 2.1 guidelines specify a minimum touch target size of 24×24 CSS pixels (with adequate spacing), and WCAG 2.2 raised this with specific spacing requirements. Google’s own guidance references 48×48 density-independent pixels as the recommended tap target size. A hamburger icon that is styled too small will frustrate real users and flag accessibility issues during audits.

The good news is that Elementor handles this well once the Nav Menu widget is configured correctly.

Follow these steps to create a mobile-responsive menu using Elementor’s Nav Menu widget. You will need Elementor Pro for the Nav Menu widget, which is not available in the free version.

Before you start: Make sure your menu already exists in WordPress. Go to Appearance > Menus and confirm your navigation menu is created and populated with the pages you want. If you are adding the menu to a site-wide header, you will need a Pro header template in Elementor Theme Builder rather than just a single page editor.

Step 1: Open the Elementor Editor

Open the page or header template you want to add the menu to. Click Edit with Elementor to enter the editor. If you are working on a site-wide header, go to Elementor > Theme Builder > Header first.

Step 2: Add the Nav Menu Widget

In the left panel, search for “Nav Menu” in the widget search bar. Drag the Nav Menu widget onto the section where you want your navigation to appear, usually inside a header section at the top of the page.

Step 3: Select Your Menu

In the widget’s Content tab, open the Menu dropdown and select the WordPress menu you created. The menu items will appear immediately in the preview.

Step 4: Set the Layout

Under Layout, choose Horizontal for the desktop display. This is the standard navigation bar layout.

Step 5: Enable the Hamburger Menu for Mobile

Scroll down in the Content tab to find the Toggle Button section. Enable the toggle. This activates the hamburger icon for mobile breakpoints.

Set the Full Width option to “Yes” if you want the mobile dropdown to span the full screen width. This is recommended for most mobile designs.

Step 6: Set the Breakpoint

Under Breakpoint, choose at which screen width the menu switches from horizontal to hamburger. The default is usually “Tablet” (up to 1024px) or “Mobile” (up to 767px). For most sites, setting this to “Mobile” keeps the horizontal menu on tablets and only collapses it on phones.

Step 7: Style the Hamburger Icon

Go to the Style tab. Under Toggle, adjust:

• Color: Set the hamburger icon color to match your brand
• Background Color: Add a background if needed for contrast
• Size: Increase the icon size if it is too small to tap comfortably on mobile (at least 44x44px is the recommended tap target size)
• Padding: Add padding around the icon to increase the tap target area

Step 8: Preview on Mobile

At the bottom of the Elementor left panel, click the Responsive Mode icon (it looks like a phone). Switch between tablet and mobile views to check how the menu looks at different screen sizes. Tap the hamburger icon in the preview to confirm the dropdown opens and all menu items are accessible.

Step 9: Save and Publish

Click Update to save changes. Then visit your site on an actual mobile device to confirm the menu works as expected in a real browser, not just the Elementor preview. The Elementor preview can behave slightly differently from a live mobile browser, particularly on older Android devices.

Troubleshooting Common Issues

If something is not working after following these steps, check the following:

• Hamburger icon does not appear: Confirm the Toggle Button is enabled in the Content tab. Also check that your Elementor version is up to date, as older versions had breakpoint bugs.
• Menu items do not show in the dropdown: Go back to Appearance > Menus and confirm your menu is saved and assigned to the correct location. If you selected the wrong menu in the Nav Menu widget, re-select it and update.
• Menu looks correct in Elementor but broken on the live site: Purge your cache plugin and CDN cache, then reload the page on mobile. Most display discrepancies after publishing are cache-related.
• Breakpoint not triggering at the right size: Elementor’s breakpoints are global settings. Go to Elementor > Site Settings > Layout to adjust the global breakpoint widths if the default values do not match your design requirements.

What If You Don’t Have Elementor Pro?

The Nav Menu widget is a Pro-only feature. If you are on Elementor Free, you cannot use it directly. That said, there are several ways to get a working mobile menu without upgrading.

Option 1: WordPress’s native Navigation block
WordPress’s block editor includes a Navigation block that is fully responsive and works independently of Elementor. You can insert it into a non-Elementor header area (such as a theme header that Elementor does not control), configure your menu inside the block settings, and the hamburger behavior is built in. This works best on block themes or themes that allow partial Elementor control, leaving the header to WordPress.

Option 2: Free navigation plugins
Two widely-used free options are Max Mega Menu and WP Mega Menu. Both add mobile-responsive navigation that replaces the default WordPress menu with a version that includes a configurable hamburger toggle, dropdown support, and basic styling controls. You do not need Elementor at all for these to work. After installing either plugin, you assign it to your theme’s menu location and configure the mobile behavior from the plugin’s settings panel. The result is a fully functional hamburger menu that works on any theme, including ones using Elementor for page content.

Option 3: CSS-only hamburger on Elementor Free (advanced)
Elementor Free does not include the Nav Menu widget, but it does allow custom CSS on sections and widgets. Some developers build a CSS-only hamburger effect using a checkbox input and label technique applied to a standard HTML widget containing a menu list. This approach is fragile, requires ongoing maintenance, and does not use real navigation semantics, so it is not recommended for production sites. It is mentioned here as an option for developers comfortable with CSS who want to avoid plugins entirely.

For most users without Elementor Pro, installing Max Mega Menu or WP Mega Menu is the fastest path to a mobile-ready navigation that does not require touching any code.