True, Tom.
Thanks again very much. Here’s what helped me with this problem, in case you face similar issues:
a) Tom recommended to try setting the Panel Width (inner) to:
“#content” instead of 100% or 800px or something. That didn’t align the sub menu items to the center, but looked very much better than before.
As a side note, Tom said, if you refresh the page at “mobile width” (as if the page has been loaded on a mobile) the menu will be structured correctly. Hopefully making this change to the menu theme will fix it so that it works when the page width is reduced too.
b) Tom also gave this tipp: The “Menu Items Align” setting is just for the top level items and refers to the menu item alignment rather than the text alignment.
To center align the text in the sub menus, please add this to the Custom Styling section of the menu theme:
#{$wrap} #{$menu} li.mega-menu-item ul.mega-sub-menu li.mega-menu-item a.mega-menu-link {
text-align: center;
}