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:

#{$wrap} #{$menu} li.mega-menu-item.mega-multi-line > a.mega-menu-link {
    @include desktop {
        line-height: inherit;
        display: flex;
        align-items: center;
    }
    @include mobile {
        br {
            display: none;
        }
    }
}

#{$wrap} #{$menu} li.mega-menu-item.mega-multi-line > a.mega-menu-link {

@include desktop {

line-height: inherit;

display: flex;

align-items: center;

}

@include mobile {

br {

display: none;

}

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.

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:

#{$wrap} #{$menu} li.mega-menu-item.mega-multi-line > a.mega-menu-link {
    @include desktop {
         line-height: 14px; /* Adjust line height */       
    }
}

#{$wrap} #{$menu} li.mega-menu-item.mega-multi-line > a.mega-menu-link {

@include desktop {

line-height: 14px; /* Adjust line height */

}

Max Mega Menu Documentation