{"id":248,"date":"2015-02-22T16:37:23","date_gmt":"2015-02-22T16:37:23","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=248"},"modified":"2020-08-14T12:20:24","modified_gmt":"2020-08-14T11:20:24","slug":"adjust-menu-width","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/adjust-menu-width\/","title":{"rendered":"Adjust Menu Width"},"content":{"rendered":"<p>By default the menu will fill 100% of the width dictated by your theme.<\/p>\n<p>We generally advise <strong>against<\/strong>\u00a0using the option below, instead you should adjust the width of the container that the menu sits inside. This would require editing\/overriding your theme CSS.<\/p>\n<p>To change the width of your menu you can add the following CSS to your menu theme by going to <em>Mega Menu &gt; Menu Themes &gt;\u00a0Custom CSS<\/em>.<\/p>\n<pre class=\"\">@include desktop {\r\n    #{$wrap} {\r\n        max-width: 1080px; \/** width in pixels or percent **\/\r\n        margin: 0 auto; \/** center align menu **\/\r\n    }\r\n}<\/pre>\n<p>Make sure you use &#8220;<strong>max-<\/strong>width&#8221; and not &#8220;width&#8221; to ensure the menu remains responsive.<\/p>\n<p>You will only be able to use the CSS above to make the menu <strong>narrower<\/strong> than the theme dictates. If you want to make your menu wider you will need to edit\/override the theme CSS and increase the width of the container that the menu sits inside.<\/p>\n<p><strong>Before:<\/strong><\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-before.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-479\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-before.png\" alt=\"adjust-menu-width-before\" width=\"981\" height=\"132\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-before.png 981w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-before-300x40.png 300w\" sizes=\"auto, (max-width: 981px) 100vw, 981px\" \/><\/a><\/p>\n<p><strong>After:<\/strong><\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-after.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-480\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-after.png\" alt=\"adjust-menu-width-after\" width=\"1005\" height=\"139\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-after.png 1005w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2015\/02\/adjust-menu-width-after-300x41.png 300w\" sizes=\"auto, (max-width: 1005px) 100vw, 1005px\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>By default the menu will fill 100% of the width dictated by your theme. We generally advise against\u00a0using the option below, instead you should adjust the width of the container that the menu sits inside. This would require editing\/overriding your theme CSS. To change the width of your menu you&#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-248","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":"By default the menu will fill 100% of the width dictated by your theme. We generally advise against\u00a0using the option below, instead you should adjust the width of the container that the menu sits inside. This would require editing\/overriding your theme CSS. To change the width of your menu you...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/248","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=248"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/248\/revisions"}],"predecessor-version":[{"id":257198,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/248\/revisions\/257198"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=248"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}