Automatically show toggle/hamburger if there isn't enough space in one row for menu items

[ebatycki]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

While in editing mode, narrowing the browser doesn't trigger the desktop menu to switch to a mobile dropdown, so I need to preview the page in another tab to see when my menu becomes a mobile dropdown. I often want to check whether my menu items start to stack (create a second row) before I see a toggle/hamburger. It takes some trial and error of editing my menu to see how much I can squeeze in before the breakpoint.

Describe the solution you'd like.

It would be nice if instead of using breakpoints for the menu, there was an option for if there isn't enough space for all the menu items in one row, automatically collapse into the toggle/hamburger. Or allow inputting a custom number.

Describe alternatives you've considered.

I've seen other themes reveal a "more" menu item when items get cut off - not a common solution so it confuses visitors.
I don't want to edit the global breakpoints because the default ones work best for the main content, and I want to keep those as is.
At the moment I'm going to add a custom breakpoint in global settings, and select it that way.

Additional context

I admit sometimes there are one too many items in the header, reducing menu items is the ideal solution, or moving elements to another row etc... but just thought that this would be nice.

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.