{"id":94395,"date":"2016-10-21T15:22:34","date_gmt":"2016-10-21T14:22:34","guid":{"rendered":"https:\/\/www.megamenu.com\/?post_type=ht_kb&#038;p=94395"},"modified":"2016-10-21T15:23:30","modified_gmt":"2016-10-21T14:23:30","slug":"centering-sub-menus","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/centering-sub-menus\/","title":{"rendered":"Centering sub menus"},"content":{"rendered":"<p>In this article we will explain how to center a &#8220;mega&#8221; sub menu beneath the menu bar.<\/p>\n<p>By default, sub menus are 100% wide, meaning they will span the full width of the menu bar. If you have center aligned your top level menu items then it may look as if the sub menu &#8216;sticks out&#8217; from either side of the menu.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94405\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-1.png\" alt=\"sub-menu-width-1\" width=\"893\" height=\"472\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-1.png 893w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-1-300x159.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-1-768x406.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-1-50x26.png 50w\" sizes=\"auto, (max-width: 893px) 100vw, 893px\" \/><\/a><\/p>\n<p>To center the sub menu beneath the menu bar, we first need to reduce it&#8217;s width.<\/p>\n<p>Go to <em>Mega Menu &gt; Menu Themes<\/em>. Set the &#8220;Panel Width (Outer)&#8221; setting to <strong>80%<\/strong>.<\/p>\n<p>The menu will now be 80% of the width of the menu bar, but it will be aligned to the left of the menu, as so:<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94406\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-2.png\" alt=\"sub-menu-width-2\" width=\"887\" height=\"468\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-2.png 887w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-2-300x158.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-2-768x405.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-2-50x26.png 50w\" sizes=\"auto, (max-width: 887px) 100vw, 887px\" \/><\/a><\/p>\n<p>To center align the sub menu we need to nudge it to the right 10%. To do that, go to Mega Menu &gt; Menu Themes and insert the following into the Custom Styling area:<\/p>\n<pre class=\"lang:default decode:true \">@include desktop {\r\n    #{$wrap} #{$menu} &gt; li.mega-menu-megamenu &gt; ul.mega-sub-menu {\r\n        margin-left: 10%;\r\n    }\r\n}<\/pre>\n<h3>End Result<\/h3>\n<p>The sub menu is centered beneath the menu bar.<\/p>\n<p><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-3.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-94407\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-3.png\" alt=\"sub-menu-width-3\" width=\"891\" height=\"470\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-3.png 891w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-3-300x158.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-3-768x405.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2016\/10\/sub-menu-width-3-50x26.png 50w\" sizes=\"auto, (max-width: 891px) 100vw, 891px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we will explain how to center a &#8220;mega&#8221; sub menu beneath the menu bar. By default, sub menus are 100% wide, meaning they will span the full width of the menu bar. If you have center aligned your top level menu items then it may look as&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"ht-kb-category":[14],"ht-kb-tag":[],"class_list":["post-94395","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":"In this article we will explain how to center a &#8220;mega&#8221; sub menu beneath the menu bar. By default, sub menus are 100% wide, meaning they will span the full width of the menu bar. If you have center aligned your top level menu items then it may look as...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/94395","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=94395"}],"version-history":[{"count":2,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/94395\/revisions"}],"predecessor-version":[{"id":94409,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/94395\/revisions\/94409"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=94395"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=94395"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=94395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}