{"id":112514,"date":"2017-05-03T17:36:03","date_gmt":"2017-05-03T16:36:03","guid":{"rendered":"https:\/\/www.megamenu.com\/documentation\/metrostore-copy\/"},"modified":"2024-11-26T10:18:27","modified_gmt":"2024-11-26T10:18:27","slug":"elementor","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/elementor\/","title":{"rendered":"Elementor"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\">Creating a new menu<\/h3>\n\n\n\n<p><em>If you want to display a completely new menu using Elementor (and not use an existing built in menu location), first follow the <a href=\"https:\/\/www.megamenu.com\/documentation\/widget\/\">Widget<\/a> documentation to create a new menu location.<\/em><\/p>\n\n\n\n<p>Use Elementor to drag the &#8220;<strong>Max Mega Menu<\/strong>&#8221; widget onto the page:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"682\" height=\"1024\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1-682x1024.png\" alt=\"\" class=\"wp-image-397246\" style=\"width:500px;height:751px\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1-682x1024.png 682w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1-200x300.png 200w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1-768x1154.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1-33x50.png 33w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1-1022x1536.png 1022w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2017\/05\/elementor-1.png 1198w\" sizes=\"auto, (max-width: 682px) 100vw, 682px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Important: The widget will not show up if you use the &#8220;search&#8221; option, therefore find it in the list of widgets and drag it from there.<\/strong><\/p>\n\n\n\n<p>After adding the Max Mega Menu Widget to the page, edit the widget settings and select the menu location you wish to display.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1194\" height=\"914\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location.png\" alt=\"\" class=\"wp-image-397248\" style=\"width:500px;height:384px\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location.png 1194w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location-300x230.png 300w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location-1024x784.png 1024w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location-768x588.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-select-location-50x38.png 50w\" sizes=\"auto, (max-width: 1194px) 100vw, 1194px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Fix Menu Z-Index<\/h3>\n\n\n\n<p>If your menu (either on desktop or mobile) is sitting behind other elements on the page, edit the <strong>section<\/strong>&nbsp;(not the widget) that the menu sits inside and apply a high z-index:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1196\" height=\"1802\" src=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex.png\" alt=\"\" class=\"wp-image-397251\" style=\"width:500px;height:undefinedpx\" srcset=\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex.png 1196w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex-199x300.png 199w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex-680x1024.png 680w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex-768x1157.png 768w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex-33x50.png 33w, https:\/\/www.megamenu.com\/wp-content\/uploads\/2023\/10\/elementor-zindex-1019x1536.png 1019w\" sizes=\"auto, (max-width: 1196px) 100vw, 1196px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Displaying Max Mega Menu inside an Elementor Popup<\/h3>\n\n\n\n<p>Elementor does not copy the menu events when it displays Max Mega Menu within a popup, so you&#8217;ll find certain aspects of the menu do not work (i.e. the ability to click the arrows to open sub menus). To fix this, install the TC Custom JavaScript plugin and add the following to <em>Appearance > Custom JavaScript<\/em>:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">jQuery(document).on('elementor\/popup\/show' , function () {\n    jQuery(\"[data-has-click-event]\").removeAttr('data-has-click-event'); \n    jQuery(\".max-mega-menu\").maxmegamenu(); \n});<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Creating a new menu If you want to display a completely new menu using Elementor (and not use an existing built in menu location), first follow the Widget documentation to create a new menu location. Use Elementor to drag the &#8220;Max Mega Menu&#8221; widget onto the page: Important: The widget&#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":[15],"ht-kb-tag":[],"class_list":["post-112514","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-theme-integration"],"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":"Creating a new menu If you want to display a completely new menu using Elementor (and not use an existing built in menu location), first follow the Widget documentation to create a new menu location. Use Elementor to drag the &#8220;Max Mega Menu&#8221; widget onto the page: Important: The widget...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/112514","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=112514"}],"version-history":[{"count":22,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/112514\/revisions"}],"predecessor-version":[{"id":417869,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/112514\/revisions\/417869"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=112514"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=112514"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=112514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}