The Elementor menu widget adapts automatically to different screen sizes using responsive breakpoints.
Desktop computers should see the full horizontal menu with all navigation links clearly visible.
Mobile devices should see a hamburger icon that expands to show the menu when tapped by the user.
But sometimes the mobile menu appears on desktop screens instead of the full horizontal menu layout.
This problem occurs because the responsive breakpoint setting has been changed from its default value.
Why Elementor menu shows the wrong version on desktop
Elementor uses a breakpoint value to decide when to switch between desktop and mobile menu layouts.
The default breakpoint is set to 768 pixels, which works well for most standard desktop monitors.
When the screen width falls below 768 pixels, Elementor switches from desktop menu to mobile menu.
If the breakpoint gets changed to a higher value, the mobile menu appears on larger screens as well.
Someone may have accidentally changed the breakpoint setting in the Elementor theme builder options.
How breakpoint settings affect Elementor menu display
The breakpoint setting tells Elementor at what screen width to switch between different layouts.
A breakpoint of 1024 pixels means any screen narrower than 1024 pixels sees the mobile menu.
Modern desktop monitors typically have resolutions of 1920×1080 or 1366×768 pixels.
A 1366 pixel wide screen with a 1024 pixel breakpoint would still show the mobile menu incorrectly.
Resetting the breakpoint to 768 pixels solves this problem for most standard desktop computers.
Step by step guide to fixing Elementor menu breakpoint problems
Follow these steps to ensure the correct menu appears on desktop and mobile devices.
- Open the page or template that contains the Elementor menu widget for editing
- Click on the menu widget to open its settings panel on the left side of the screen
- Navigate to the Advanced tab and look for the Responsive section in the settings
- Find the breakpoint setting that controls when the menu switches to mobile layout
- Change the breakpoint value to 768 pixels (the Elementor default setting)
- Save the page or template and clear all caches including plugin and browser caches
- Test the website on both desktop and mobile devices to confirm the fix works
- If the problem persists, check the Elementor site settings for global breakpoint overrides
- Navigate to Elementor → Settings → Style and look for the responsive breakpoint section
- Ensure the mobile breakpoint is set to 768 pixels and the tablet breakpoint to 1024 pixels
How to customize breakpoints without breaking the menu
Elementor allows custom breakpoints for designers who need specific screen width transitions.
To set custom breakpoints while keeping the menu working correctly, test on real devices after each change.
Change breakpoints in small increments and test the menu appearance on various screen sizes.
Use browser developer tools to simulate different devices without needing physical hardware.
Remember that breakpoints affect all responsive widgets, not just the navigation menu widget.
Elementor menu breakpoint reference table
Here is a reference table for breakpoint values and their effects on Elementor menu display.
| Breakpoint value (pixels) | Desktop menu appears on | Mobile menu appears on |
|---|---|---|
| 768 (default) | Screens wider than 768px (most desktops, tablets landscape) | Screens narrower than 768px (phones, tablets portrait) |
| 992 (tablet landscape) | Screens wider than 992px (desktops only) | Screens narrower than 992px (phones, all tablets) |
| 1024 (some themes) | Screens wider than 1024px (large desktops only) | Screens narrower than 1024px (most devices) |
| 1200 (custom) | Screens wider than 1200px (very large desktops) | Screens narrower than 1200px (almost all devices) |
For more information about Elementor menu widget configuration, visit the Elementor page on wpwizzy.com.
Preventing Elementor menu breakpoint problems in the future
Document any breakpoint changes made to the website for future reference and troubleshooting.
Test menu appearance on multiple devices after every breakpoint or theme update.
Keep a staging website for testing breakpoint changes before applying them to the live site.
Use Elementor’s default breakpoint settings unless there is a specific reason to change them.
Train team members about the effects of breakpoint changes on the navigation menu display.
Regularly check the website on different devices to catch breakpoint problems early before visitors notice.