Widget areas take up the entire width of a submenu by default. This is because the widgets inside the widget area form the columns, and a single menu item contains one widget area, which contains multiple widgets. This is explained in the Widgets section, and you can see a visualization in the Customization Assistant by clicking the “Uber” tab.
If you wish to have a widget area share a row with normal menu items, you’ll need to make some CSS customizations to make them act like normal widget items. Essentially, this means floating the item left, adjusting its width, and removing the clear.
To adjust the width of the widget area, you can target it directly
/* The ID will be specific to your menu */
#megaMenu #menu-item-XX{
width:300px; /* Change as desired, set to a percentage if using full-width, or set to auto */
float:left;
clear:none;
padding:11px 27px;
}
Don’t forget to consider what will occur at responsive sizes if you set an explicit width
Note that if you want to add more than one widget to this widget area, you may get unpredictable results (because the widget area is told to “size automatically”, while the widgets are told to “size to the parent container”. This is essentially a circular reference, and the result is unpredictable). Setting an explicit width (instead of ‘auto’) resolves the issue.