{"id":151900,"date":"2018-04-18T12:09:02","date_gmt":"2018-04-18T11:09:02","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/max-mega-menu-pro-invoice-copy\/"},"modified":"2024-11-19T10:21:37","modified_gmt":"2024-11-19T10:21:37","slug":"flex-variable-width-menu-items","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/flex-variable-width-menu-items\/","title":{"rendered":"Variable \/ Flexible Width Menu Items"},"content":{"rendered":"\n<p><em><strong>Only compatible with modern browsers.<\/strong><\/em><\/p>\n\n\n\n<p>In the demo below the menu items automatically adjust their width to fill the menu bar.<\/p>\n\n\n\n<p>Try resizing your browser to see how the width of the menu items adapt as the menu width changes.<\/p>\n\n\n<div id=\"mega-menu-wrap-max_mega_menu_2\" class=\"mega-menu-wrap\"><div class=\"mega-menu-toggle\"><div class=\"mega-toggle-blocks-left\"><\/div><div class=\"mega-toggle-blocks-center\"><\/div><div class=\"mega-toggle-blocks-right\"><div class='mega-toggle-block mega-menu-toggle-block mega-toggle-block-1'><button class='mega-toggle-standard mega-toggle-label' aria-haspopup='true' aria-expanded='false' aria-controls='mega-menu-max_mega_menu_2'><span class='mega-toggle-label-closed'>MENU<\/span><span class='mega-toggle-label-open'>MENU<\/span><\/button><\/div><\/div><\/div><ul id=\"mega-menu-max_mega_menu_2\" class=\"mega-menu max-mega-menu mega-menu-horizontal mega-no-js\" data-event=\"hover_intent\" data-effect=\"fade_up\" data-effect-speed=\"200\" data-effect-mobile=\"disabled\" data-effect-speed-mobile=\"0\" data-mobile-force-width=\"false\" data-second-click=\"go\" data-document-click=\"collapse\" data-vertical-behaviour=\"standard\" data-breakpoint=\"871\" data-unbind=\"true\" data-mobile-state=\"collapse_all\" data-mobile-direction=\"vertical\" data-hover-intent-timeout=\"300\" data-hover-intent-interval=\"100\" data-overlay-desktop=\"false\" data-overlay-mobile=\"false\"><li class=\"mega-no-flex mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-has-icon mega-icon-left mega-hide-text mega-menu-item-151897\" id=\"mega-menu-item-151897\"><a class=\"dashicons-wordpress mega-menu-link\" href=\"http:\/\/#\" tabindex=\"0\" aria-label=\"Icon\"><\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-151892\" id=\"mega-menu-item-151892\"><a class=\"mega-menu-link\" href=\"http:\/\/#\" tabindex=\"0\">Apples<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-151893\" id=\"mega-menu-item-151893\"><a class=\"mega-menu-link\" href=\"http:\/\/#\" tabindex=\"0\">Oranges<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-151894\" id=\"mega-menu-item-151894\"><a class=\"mega-menu-link\" href=\"http:\/\/#\" tabindex=\"0\">Bananas<\/a><\/li><li class=\"mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-151895\" id=\"mega-menu-item-151895\"><a class=\"mega-menu-link\" href=\"http:\/\/#\" tabindex=\"0\">Grapes<\/a><\/li><li class=\"mega-no-flex mega-menu-item mega-menu-item-type-custom mega-menu-item-object-custom mega-align-bottom-left mega-menu-flyout mega-menu-item-151898\" id=\"mega-menu-item-151898\"><div class='mega-search-wrap'>    <form class='mega-search expand-to-left mega-search-closed' role='search' action='https:\/\/www.megamenu.com\/'><input  type='text' tabindex='-1' role='searchbox' id='mega-search-151898' aria-label='Search...' data-placeholder='Search...' name='s' autocomplete='off' aria-hidden='true' \/><span tabindex='0' role='button' class='dashicons dashicons-search search-icon' aria-controls='mega-search-151898' aria-label='Search' aria-expanded='false' aria-haspopup='true'><\/span><input type='submit' value='Search'><input type='hidden' name='ht-kb-search' value='1' \/>    <\/form><\/div><\/li><\/ul><\/div>\n\n\n<h3 class=\"wp-block-heading\">Allowing Menu Items to Expand to fill the width of the menu<\/h3>\n\n\n\n<p><strong>Step 1<\/strong><\/p>\n\n\n\n<p>Under <em>Mega Menu &gt; Menu Themes &gt; Menu Bar &gt; Top Level Menu Items &gt; Menu Item Padding<\/em>, make sure the left and right padding options are set to a sensible value (e.g. no more than 10px).<\/p>\n\n\n\n<p><strong>Step 2<\/strong><\/p>\n\n\n\n<p>Go to <em>Mega Menu &gt; Menu Themes &gt; Custom Styling<\/em> and insert the following:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@include desktop {\n    #{$wrap} #{$menu} {\n        display: flex;\n        \n        > li.mega-menu-item {\n            flex: 1 1 auto;\n            \n            \/** Do not grow menu items with \".mega-no-flex\" class **\/\n            &amp;.mega-no-flex {\n                flex: 0 0 auto;\n                \n                > a.mega-menu-link > img.mega-menu-logo {\n                    max-width: none;\n                }\n            }\n\n            \/** Center align text within menu item **\/\n            > a.mega-menu-link {\n                text-align: center;\n                white-space: nowrap;\n                \n                > span.mega-indicator {\n                    float: none;\n                }\n            }\n        }\n    }\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Preventing certain items from expanding<\/h3>\n\n\n\n<p>In the demo menu above, only the textual items expand &#8211; the WordPress icon and the Search icon do not expand.<\/p>\n\n\n\n<p>To prevent a menu item expanding, go to <em>Appearance &gt; Menus<\/em>.<\/p>\n\n\n\n<p>Click &#8220;Screen Options&#8221; at the top and make sure &#8220;CSS Classes&#8221; is checked.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1938\" height=\"922\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes.png\" alt=\"\" class=\"wp-image-151917\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes.png 1938w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes-300x143.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes-768x365.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes-1024x487.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/css-classes-50x24.png 50w\" sizes=\"auto, (max-width: 1938px) 100vw, 1938px\" \/><\/a><\/figure>\n\n\n\n<p>Next, open the settings for the menu item and add &#8220;no-flex&#8221; as a Custom Class:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1892\" height=\"1594\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex.png\" alt=\"\" class=\"wp-image-151918\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex.png 1892w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex-300x253.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex-768x647.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex-1024x863.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2018\/04\/no-flex-50x42.png 50w\" sizes=\"auto, (max-width: 1892px) 100vw, 1892px\" \/><\/a><\/figure>\n\n\n\n<p>Save the menu.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Only compatible with modern browsers. In the demo below the menu items automatically adjust their width to fill the menu bar. Try resizing your browser to see how the width of the menu items adapt as the menu width changes. Allowing Menu Items to Expand to fill the width of&#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-151900","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":"Only compatible with modern browsers. In the demo below the menu items automatically adjust their width to fill the menu bar. Try resizing your browser to see how the width of the menu items adapt as the menu width changes. Allowing Menu Items to Expand to fill the width of...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/151900","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=151900"}],"version-history":[{"count":20,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/151900\/revisions"}],"predecessor-version":[{"id":417450,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/151900\/revisions\/417450"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=151900"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=151900"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=151900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}