{"id":25495,"date":"2016-09-11T20:30:50","date_gmt":"2016-09-11T19:30:50","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/change-second-click-behaviour-for-single-location-copy\/"},"modified":"2021-10-05T11:10:24","modified_gmt":"2021-10-05T10:10:24","slug":"how-to-display-menu-items-over-multiple-lines","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/how-to-display-menu-items-over-multiple-lines\/","title":{"rendered":"How to display menu items over multiple lines"},"content":{"rendered":"<h3>Prerequisites<\/h3>\n<p>Your menu will need to be tall enough to accommodate two line menu items. To change the height of the menu, go to <em>Mega Menu &gt; Menu Themes<\/em> and adjust the &#8216;Menu Height&#8217; option.<\/p>\n<h3>Custom CSS<\/h3>\n<p>Go to <em>Mega Menu &gt; Menu Themes<\/em> and enter the following into the Custom Styling area:<\/p>\n<pre class=\"lang:css decode:true\">#{$wrap} #{$menu} li.mega-menu-item.mega-multi-line &gt; a.mega-menu-link {\r\n    @include desktop {\r\n        line-height: inherit;\r\n        display: flex;\r\n        align-items: center;\r\n    }\r\n    @include mobile {\r\n        br {\r\n            display: none;\r\n        }\r\n    }\r\n}<\/pre>\n<h3>Menu Item Setup<\/h3>\n<p>To make menu items display over two lines you will need to add <span class=\"lang:default decode:true crayon-inline \">&lt;br \/&gt;<\/span>\u00a0 tags to the menu item title. To do this go to <em>Appearance &gt; Menus<\/em>, expand the menu item in question and edit the Navigation Label.<\/p>\n<p>You will also need to add a &#8216;multi-line&#8217; CSS class to the item to make sure the text displays within the bounds of the menu.<\/p>\n<p>If you do not see the &#8216;CSS Classes&#8217; option, click &#8216;Screen Options&#8217; at the top right of the page and enable CSS Classes.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/multi-line-css-class.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-25497\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/multi-line-css-class.png\" alt=\"Screenshot of multi line CSS Class\" width=\"449\" height=\"601\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/multi-line-css-class.png 449w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/multi-line-css-class-224x300.png 224w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/09\/multi-line-css-class-37x50.png 37w\" sizes=\"auto, (max-width: 449px) 100vw, 449px\" \/><\/a><\/p>\n<h3>Adjusting the line height of multi-line menu items<\/h3>\n<p>If the menu item lines look too\u00a0bunched up or spaced too far apart you can adjust it using Custom CSS. Go to <em>Mega Menu &gt; Menu Themes<\/em> and insert the following into the Custom Styling area:<\/p>\n<pre class=\"lang:default decode:true \">#{$wrap} #{$menu} li.mega-menu-item.mega-multi-line &gt; a.mega-menu-link {\r\n    @include desktop {\r\n         line-height: 14px; \/* Adjust line height *\/       \r\n    }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 &gt; Menu Themes and adjust the &#8216;Menu Height&#8217; option. Custom CSS Go to Mega Menu &gt; Menu Themes and enter the following into the&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-25495","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-faqs"],"uagb_featured_image_src":[],"uagb_author_info":{"display_name":"Tom Hemsley","author_link":"https:\/\/www.megamenu.com\/author\/megamenu\/"},"uagb_comment_info":0,"uagb_excerpt":"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 &gt; Menu Themes and adjust the &#8216;Menu Height&#8217; option. Custom CSS Go to Mega Menu &gt; Menu Themes and enter the following into the...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/25495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/comments?post=25495"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/25495\/revisions"}],"predecessor-version":[{"id":314296,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/25495\/revisions\/314296"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=25495"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=25495"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=25495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}