How to display menu items over multiple lines

Prerequisites

Your menu will need to be tall enough to accommodate two line menu items. To change the height of the menu, go to Mega Menu > Menu Themes and adjust the ‘Menu Height’ option.

Custom CSS

Go to Mega Menu > Menu Themes and enter the following into the Custom Styling area:

To make menu items display over two lines you will need to add <br />  tags to the menu item title. To do this go to Appearance > Menus, expand the menu item in question and edit the Navigation Label.

You will also need to add a ‘multi-line’ CSS class to the item to make sure the text displays within the bounds of the menu.

If you do not see the ‘CSS Classes’ option, click ‘Screen Options’ at the top right of the page and enable CSS Classes.

Screenshot of multi line CSS Class

Adjusting the line height of multi-line menu items

If the menu item lines look too bunched up or spaced too far apart you can adjust it using Custom CSS. Go to Mega Menu > Menu Themes and insert the following into the Custom Styling area:

Related Articles