Uber Menu Items on 2 lines breaking layout

[simonwr1976]

I’ve created an uber menu, but with longer item titles that appear on two lines it then breaks the row underneath, only starting after the two line item above. In the screenshot attached it’s ‘Dressed Crab’ that’s causing the problem, ‘Mussels’ should be appearing underneath Clams.

I’ve been trying to find height, margin, padding selectors or classes, but I can’t figure out how to solve the issue

[ruenel]

Hello @simonwr1976,

Thanks for writing in! Your issue is because of the default styling of the Ubermenu, using this css code:

.ubermenu .ubermenu-submenu .ubermenu-column {
    display: block;
    float: left;
    width: auto;
} 

along with your different menu item title length. The menu items do not have the same height which pushes the other items down to the next rows. To get this resolve, we need to modify the default styling by displaying the items as inline-block and remove the float property or set it to none. Therefore, this CSS code should resolve your issue by adding this Pro Theme Options > Custom CSS:

.ubermenu .ubermenu-submenu .ubermenu-column {
    display: inline-block;
    float: none;
} 

Be advised that the codes above serve as an example to get you started in resolving your issue. You will be the one to maintain the code whenever there are theme and plugin updates to make sure that it continues on work and does not create any issues or conflicts on your site.

Best Regards.