![\"\"](\"https:\/\/www.megamenu.com\/wp-content\/uploads\/2019\/10\/divi-menu-location.png\")
<\/a><\/p>\nStep 2: Output the menu using the Divi Theme Builder<\/h3>\n
Go to Divi > Theme Builder<\/em> and click “Add Global Header”. In the small popup that appears, click “Build Global Header”. On the next screen, click “Build From Scratch”.<\/p>\n Create a new full width row:<\/p>\n Add a new Code<\/strong> Module (not a Menu module!)<\/em><\/span> to the row:<\/p>\n Paste the menu shortcode into the Text Box:<\/p>\n (This shortcode can also be found on the Mega Menu > Menu Locations<\/em> page)<\/p>\n Save the module, then expand the three dots within the purple circle and click Save there also.<\/p>\n The previous steps will result in a “boxed” menu. To make the menu full width, add a full width section and repeat the previous steps.<\/p>\n By default there will be a lot of white space around the menu. You can remove this by editing the module and<\/strong> row settings and setting the Margin and Padding options to 0px. You may need to make other adjustments to suit your own requirements.<\/p>\n If your menu is appearing behind other page elements, go to Appearance > Customize > Additional CSS<\/em> and add the following:<\/p>\n We now have a “stock” version of Max Mega Menu output on the site:<\/p>\n From here we can build the menu out, including changing the styling<\/a>, adding a logo<\/a>, search box<\/a>, custom icons<\/a> etc.<\/p>\n","protected":false},"excerpt":{"rendered":" Divi 4 includes a new header builder. The addition of the header builder allows us to perfectly integrate Max Mega Menu with Divi without the need for custom code or a child theme. Step 1 – Create the menu This step is the same for all themes. First we need…<\/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":[15],"ht-kb-tag":[],"class_list":["post-217607","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":"Divi 4 includes a new header builder. The addition of the header builder allows us to perfectly integrate Max Mega Menu with Divi without the need for custom code or a child theme. Step 1 – Create the menu This step is the same for all themes. First we need...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/217607","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=217607"}],"version-history":[{"count":8,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/217607\/revisions"}],"predecessor-version":[{"id":224667,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/217607\/revisions\/224667"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=217607"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=217607"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=217607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/pre>\n
<\/a><\/p>\nFull Width Menu<\/h4>\n
<\/a><\/p>\nRemoving white space from around the menu<\/h3>\n
<\/a><\/p>\nFix z-index<\/h3>\n
header {\r\n position: relative;\r\n z-index: 9999999;\r\n}<\/pre>\nEnd Result<\/h3>\n
<\/a><\/p>\n