Navigation Inline top links link length

[davebrain]

Hi,

Despite a lot of trying, I’ve not been able to handle long page names in the ‘Navigation Inline’ element of the mega menu dropdown element (see Real Estate / Property Management option below).

Please can you tell me how to change the width of each column of links when the ‘Navigation Inline’ element splits the top links across multiple columns?

I’ve been able to change the text length so the full page name appears by changing the min width of the Top Links child element of the Navigation Inline element but the text just clashes with the next column of links which has not moved over.

Changing the width of the Mega Menu doesn’t work as it just adds columns:

And there doesn’t appear to be any options in Flexbox options at any level that help with this.

Is there also a way to left align all top links so that the bottom entries stick to the columns rather than wrapping them across multiple columns as YouTube is in the photo below?

Many thanks,

David

[nabeel]

Hey David,

To adjust the width of the dropdown and columnization of menu items, you need to perform couple of steps:

1. Go to the Mega Menu settings and increase the Min & Max width:

2. Now the dropdown area has increased and you need to adjust the number of columns inside. To do this, inspect the Navigation Inline element, under Menu section find Items Flex and set the Basis to 33% (33% means you will have 3 columns in a container, if you need 4 columns, set it to 25% and so on)

The YouTube menu item looks misaligned because you have 3 columns and menu items are less to be adjusted. For this case try setting the Basis to 25% so you have 4 columns and YouTube menu item will be left aligned in the first column.

Hope this explains!