{"id":654,"date":"2015-03-31T22:20:19","date_gmt":"2015-03-31T22:20:19","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=654"},"modified":"2019-09-20T12:20:34","modified_gmt":"2019-09-20T11:20:34","slug":"adjust-sub-menu-width","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/adjust-sub-menu-width\/","title":{"rendered":"How to change the width of mega sub menus"},"content":{"rendered":"

To adjust the width of the mega menu, go to Mega Menu > Menu Themes<\/em>.<\/p>\n

The width of the mega menus are defined by the ‘Panel Width’ setting.<\/p>\n

\"\"<\/a><\/p>\n

There are 3 types of value you can use for this setting:<\/p>\n

Option 1. Percentage Width<\/h3>\n

Entering a percentage width will make the sub menus display at a width relative to the menu itself.<\/p>\n

For example: 100% (default)<\/strong><\/p>\n

\"\"<\/a><\/p>\n

Percentage width menus will always be aligned to the left hand edge of the menu bar. In most cases, the only percentage width you should use is\u00a0100%<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

Option 2. Fixed Width<\/h3>\n

To fix the sub menu at a certain width, regardless of screen size, enter a pixel based value.<\/p>\n

For example: 500px<\/strong><\/p>\n

\"\"<\/a><\/p>\n

Fixed width sub menus will always be aligned to the left hand edge of the parent menu item. <\/strong>You can adjust the alignment using the “Sub Menu Align” option in the parent menu item options<\/a>.<\/p>\n

\"\"<\/a><\/p>\n

Option 3. Dynamic Width (jQuery\/CSS Selector)<\/h3>\n

Dynamic widths can be used to\u00a0automatically align and size the sub menu to match an existing element on the page.<\/p>\n

To make use of this feature you’ll need to find\u00a0the HTML element that wraps your page content and use\u00a0the ID or class of the element (in the form of a jQuery selector) as Panel Width setting.<\/p>\n

For example: #container, body, #page, .content.<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

In the example above we set the Panel Width (Outer) to “#content”. This value will change from theme to theme, so you will need to right click on the page and go to “Inspect” to find the correct class or ID to use as your Panel Width.<\/p>\n

\"\"<\/a><\/p>\n

Stretching the menu to fill the browser width<\/h4>\n

In the example below we have set the Outer width to “body” (to fill the width of the page) and the Inner Width to “#content” (to line up with the existing page content).<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Custom Sub Menu Widths<\/h3>\n

With Max Mega Menu Pro it is possible to set a sub menu width per menu item<\/strong>. This value will override the general theme setting.<\/p>\n

For example, you could set one sub menu to be 400px wide and another to be 700px wide.<\/p>\n

\"Custom<\/a>

Custom Sub Menu Width<\/p><\/div>\n

This functionality is part of Custom Item Styling<\/a>.<\/p>\n

FAQ:<\/h3>\n

Can the sub menu width automatically adjust to fit the content?<\/strong><\/p>\n

In short, no.<\/p>\n

All HTML elements must have a width specified at some point. An HTML element\u00a0may inherit the width from its parent (e.g. you can say “this element should be 50% of the width of its parent”), or you might directly specify a width (e.g. “this element should be 600px wide”).<\/p>\n

You cannot say “work out the ideal width for this element and apply it”. HTML & CSS do not understand what\u00a0a human’s idea of the ideal width would be.<\/p>\n","protected":false},"excerpt":{"rendered":"

To adjust the width of the mega menu, go to Mega Menu > Menu Themes. The width of the mega menus are defined by the ‘Panel Width’ setting. There are 3 types of value you can use for this setting: Option 1. Percentage Width Entering a percentage width will make…<\/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-654","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":"To adjust the width of the mega menu, go to Mega Menu > Menu Themes. The width of the mega menus are defined by the ‘Panel Width’ setting. There are 3 types of value you can use for this setting: Option 1. Percentage Width Entering a percentage width will make...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/654","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=654"}],"version-history":[{"count":20,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/654\/revisions"}],"predecessor-version":[{"id":214037,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/654\/revisions\/214037"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=654"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}