Flyout menus can lap over page width and create horizontal scroll + How to Fix

Problem: If you have a top menu item near to the viewport border (e.g. near to the right) its corresponding submenu flyout can lap over the page width (e.g. over the right viewport boundary) and hence you get a horizontal scrollbar:

HOW TO FIX — DIFFERENT APPROACHES

Fix 1: Limit the max-width of the particular troublemaker submenu(s) with Custom CSS:

#mega-menu-item-123 > .mega-sub-menu {
	max-width: 160px !important;
}

Fix 2a: Make particular submenu right aligned:

Remaining problem: In right aligned submenus the menu items by default are right aligned too. Underlying assumption seems to be that right aligned menus are used for RTL scripts predominantly. But there’s a fix for this remaining problem too.

Fix 2b: Custom CSS to make the menu items within a right aligned submenu left aligned:

#mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 li.mega-menu-flyout.mega-align-bottom-right li.mega-menu-item a.mega-menu-link {
	text-align: left !important;
}

PROPOSAL FOR A FEATURE IMPROVEMENT

Make it possible in the Settings UI to set the text-alignment for all child menu items of a particular sub-menu, so that you can e.g. achieve left-aligned menu items in a right aligned submenu.

Reproduction

1) WordPress → Appearance → Menus.

2) Select your menu > Hover over your root menu item (with children shown in flyout menu) and then click on the “Mega Menu” settings button.

3) Popup opens. Go to tab “Settings” → section “Sub Menu Settings” → Sub menu align → Right edge of Parent

a) Shows hint: Right aligned flyout menus will expand to the left.

b) Save.

c) Now the text gets shown right aligned.

d) Problem:

In MMM right-aligned menus by default also have right aligned text.

This is a good default, because right aligned submenus most likely get used on websites with RTL scripts (Arabic, Hebrew, etc).

But if you want to nevertheless have the child items left-aligned, you currently need to do this with a CSS override (as shown above).

Proposal for UI option:

• Section “Menu Item Options” has setting Menu Item align : default | left | right but thats for the menu item itself (in relation to its siblings), not its children.
• At section “Sub Menu Options“ offer setting “Child items align: default | left | right”.