{"id":19461,"date":"2016-06-16T11:01:25","date_gmt":"2016-06-16T10:01:25","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/faqs\/adjust-sub-menu-width-copy\/"},"modified":"2019-10-18T10:48:55","modified_gmt":"2019-10-18T09:48:55","slug":"menu-items-wrapping-two-lines","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/menu-items-wrapping-two-lines\/","title":{"rendered":"Menu Items Wrapping onto Two Lines"},"content":{"rendered":"<p>If the combined width of your\u00a0top level menu items exceeds the\u00a0maximum width available for your menu,\u00a0the items that don&#8217;t fit on the top row will be pushed down and start a new row.<\/p>\n<p>The behaviour of the menu can be compared to a standard paragraph of text (like this one). Words that don&#8217;t fit onto the first line will drop onto the next line. The number of words that fit onto the first line depends on how wide your browser is.<\/p>\n<p>Here are some ideas to allow your menu items to fit onto a single line:<\/p>\n<ul style=\"list-style-type: disc; margin-left: 40px;\">\n<li>Go to Mega Menu &gt; Menu themes. In the Mobile section, adjust the &#8220;Responsive Breakpoint&#8221; option to the width at which the menu can no longer fit onto a single line. The menu will be converted to a mobile menu just before it would otherwise wrap onto two lines.<\/li>\n<li>Reduce the number of top level items. You can do this by rearranging related top level menu items into a single sub menu<\/li>\n<li>Reduce the font size, padding and menu item margin of the top level items so they each take up less space<\/li>\n<li>Rename menu items so that they take up less space. E.g. &#8220;Contact Us&#8221; can become &#8220;Contact&#8221;, &#8220;Skiing&#8221; can become &#8220;Ski&#8221;.<\/li>\n<li>Replace menu items with icons. E.g. the word &#8220;FaceBook&#8221; can be replaced with a FaceBook icon.<\/li>\n<li>Increase\u00a0the available width for the menu to fit into by adjusting your theme styling.<\/li>\n<\/ul>\n<h3>How to reduce the top level menu item padding on smaller screens<\/h3>\n<p>Reducing the <strong>padding<\/strong> on your top level menu items, as the screen reduces in width, can help allow all of your menu items to sit on one row.<\/p>\n<p>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\">\/* Set top level menu item padding when screen width below 1000px *\/\r\n@media only screen and (max-width : 1000px) {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-item &gt; a.mega-menu-link {\r\n        padding-left: 10px;\r\n        padding-right: 10px;\r\n    }\r\n}\r\n\r\n\/* Set top level menu item padding when screen width below 800px *\/\r\n@media only screen and (max-width : 800px) {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-item &gt; a.mega-menu-link {\r\n        padding-left: 5px;\r\n        padding-right: 5px;\r\n    }\r\n}<\/pre>\n<h3>How to reduce the top level menu item font size on smaller screens<\/h3>\n<p>Reducing the <strong>font size<\/strong> of your top level menu items, as the screen reduces in width, can help allow all of your menu items to sit on one row.<\/p>\n<p>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 \">\/* Set top level menu item font size when screen width below 1000px *\/\r\n@media only screen and (max-width : 1000px) {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-item &gt; a.mega-menu-link {\r\n        font-size: 12px;\r\n    }\r\n}\r\n\r\n\/* Set top level menu item padding when screen width below 800px *\/\r\n@media only screen and (max-width : 800px) {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-item &gt; a.mega-menu-link {\r\n        font-size: 10px;\r\n    }\r\n}\r\n\r\n\/* Set the font size back to normal for the mobile\/responsive menu *\/\r\n@include mobile {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-item &gt; a.mega-menu-link {\r\n        font-size: 14px;\r\n    }\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If the combined width of your\u00a0top level menu items exceeds the\u00a0maximum width available for your menu,\u00a0the items that don&#8217;t fit on the top row will be pushed down and start a new row. The behaviour of the menu can be compared to a standard paragraph of text (like this one)&#8230;.<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"open","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-19461","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":"If the combined width of your\u00a0top level menu items exceeds the\u00a0maximum width available for your menu,\u00a0the items that don&#8217;t fit on the top row will be pushed down and start a new row. The behaviour of the menu can be compared to a standard paragraph of text (like this one)....","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/19461","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=19461"}],"version-history":[{"count":4,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/19461\/revisions"}],"predecessor-version":[{"id":217606,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/19461\/revisions\/217606"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=19461"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=19461"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=19461"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}