{"id":2581,"date":"2015-06-18T11:23:29","date_gmt":"2015-06-18T10:23:29","guid":{"rendered":"https:\/\/www.megamenu.com\/?page_id=2581"},"modified":"2020-01-02T14:00:08","modified_gmt":"2020-01-02T14:00:08","slug":"divi","status":"publish","type":"ht_kb","link":"https:\/\/www.megamenu.com\/documentation\/divi\/","title":{"rendered":"Divi"},"content":{"rendered":"

Header Menu Option 1: Use the Divi Header Builder<\/h3>\n

Divi 4 has been released and includes a new header builder, which gives you more flexibility on how your header is laid out and makes it a lot easier to integrate Max Mega Menu.<\/p>\n

Divi 4 Header Builder instructions<\/a><\/p>\n

Header Menu Option 2: Use the default Divi Header<\/h3>\n

Before you start<\/h4>\n

We have many users who use Max Mega Menu with Divi with no issues at all, however some users find it more difficult to integrate with than we would like. The Divi Menu has many more options than most themes, each tightly integrated with other areas of the theme. This makes it a lot more difficult to integrate Max Mega Menu with Divi than it is with other themes.<\/p>\n

Due to the way Divi is coded both the desktop and mobile menu will be replaced with Max Mega Menu<\/strong>.<\/p>\n

If you are planning on purchasing the Pro addon, we request you try the free version of Max Mega Menu (and make sure you are happy with it)\u00a0<\/strong>before upgrading to Pro. The Pro addon will not change the base functionality of Max Mega Menu.<\/em><\/p>\n

If you just want to create mega sub menus using Divi then we recommend using functionality built into Divi<\/a>.<\/p><\/blockquote>\n

Fix Mobile Menu<\/h4>\n

The Divi mobile menu is coupled with the Divi desktop menu, therefore it is not possible to keep the Divi Mobile Menu if the desktop menu is replaced with Max Mega Menu.<\/p>\n

The following CSS will hide the native Divi Mobile Menu and properly display the Max Mega Menu mobile menu.<\/p>\n

From your WordPress Dashboard, go to Mega Menu > Menu Themes > Custom Styling<\/em><\/strong> and paste in the following.<\/p>\n

@media only screen and (max-width: 980px) {\r\n    header .et_pb_fullwidth_menu .fullwidth-menu-nav,\r\n    header nav#top-menu-nav {\r\n        display: block !important;\r\n    }\r\n}\r\n@media only screen and (max-width: 767px) {\r\n    header nav#top-menu-nav,\r\n    header #et-top-navigation {\r\n       width: 100%;\r\n    }\r\n}\r\nheader #et_mobile_nav_menu, \r\nheader .et_mobile_nav_menu {\r\n    display: none !important;\r\n}\r\n\r\n\/* stop menu from overlapping logo on mobile *\/\r\n\r\n@media all and (max-width: $responsive_breakpoint) {\r\n    header .logo_container {\r\n        position: relative !important;\r\n        padding-top: 15px;\r\n    }\r\n    header div#et-top-navigation {\r\n        padding-left: 0 !important\r\n    }\r\n}<\/pre>\n
If you do not like the Max Mega Menu mobile menu, you can try using a different plugin for the mobile menu<\/a>.<\/p>\n
Full Width Sub Menus<\/h4>\n
To make the mega menu drop downs span the entire width of the page (rather than just the width of the menu), go to Mega Menu > Menu Themes > Mega Menu<\/em> and set the following values:<\/p>\n
Panel Width (Outer):<\/p>\n
body<\/pre>\n
Panel Width (Inner):<\/p>\n
.container<\/pre>\n
Sub Menu Animations<\/h4>\n
Depending on how Divi is set up it will override the mega menu dropdown effect.<\/p>\n
Go to Appearance > Customize > Header & Navigation > Primary Menu Bar<\/em>. Set “DROPDOWN MENU ANIMATION” to “Fade”. This should stop divi from overriding the mega menu effect.<\/p>\n
Full Width Menu<\/h4>\n
To make the primary menu full width (so that it sits underneath the logo), go to Appearance > Customize > Additional CSS<\/em>\u00a0and insert the following:<\/p>\n
.logo_container {\r\n    position: relative !important;\r\n    padding-top: 15px;\r\n}\r\ndiv#et-top-navigation {\r\n    padding-left: 0 !important;\r\n    float: none !important;\r\n}\r\nnav#top-menu-nav {\r\n    float: none !important;\r\n}<\/pre>\n
Full Width Mobile Menu<\/h4>\n
From your WordPress Dashboard, go to Appearance > Customize > Additional CSS<\/em>\u00a0and insert the following:<\/p>\n
@media screen and (max-width: 782px) {\r\n    header .container {\r\n\t width: 100%;\r\n    }\r\n}<\/pre>\n
Display Secondary Menu on Mobiles<\/h4>\n
The secondary menu is hidden by default on mobiles. To make it display again, go to Appearance > Customize > Additional CSS<\/em>\u00a0and insert the following:<\/p>\n
#top-header #et-secondary-nav,\r\n#top-header #et-secondary-menu,\r\n#top-header {\r\n\tdisplay: inline-block !important;\r\n}<\/pre>\n
Hide Theme Logo on Mobile<\/h4>\n
If you\u00a0want to display your logo as a mobile toggle block<\/a> rather than using the standard theme logo, go to Mega Menu > Menu Themes > Custom Styling<\/em>\u00a0and insert the following:<\/p>\n
@include mobile {\r\n    .logo_container {\r\n        display: none;\r\n    }\r\n}<\/pre>\n
Fix “Full Width Menu” module<\/h3>\n
When using the full width menu module in Divi the Primary Menu will always be displayed regardless of the menu selected in the module settings. To fix this add the following to the bottom of your themes functions.php file:<\/p>\n
function remove_theme_location($args) {\r\n\tif ( isset( $args['theme_location'] ) ) {\r\n\t\tunset( $args['theme_location'] );\r\n\t}\r\n\r\n\treturn $args;\r\n}\r\nadd_filter('et_fullwidth_menu_args', 'remove_theme_location');\r\nadd_filter('et_menu_args', 'remove_theme_location');<\/pre>\n
Note: Do not use the Menu \/ Full Width Menu module if you are attempting to display a Max Mega Menu menu within your page content. Instead, add a Code module to your page and use a shortcode<\/a> to display the menu.<\/p>\n","protected":false},"excerpt":{"rendered":"
Header Menu Option 1: Use the Divi Header Builder Divi 4 has been released and includes a new header builder, which gives you more flexibility on how your header is laid out and makes it a lot easier to integrate Max Mega Menu. Divi 4 Header Builder instructions Header Menu…<\/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-2581","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":"Header Menu Option 1: Use the Divi Header Builder Divi 4 has been released and includes a new header builder, which gives you more flexibility on how your header is laid out and makes it a lot easier to integrate Max Mega Menu. Divi 4 Header Builder instructions Header Menu...","_links":{"self":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2581","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=2581"}],"version-history":[{"count":43,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2581\/revisions"}],"predecessor-version":[{"id":226038,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb\/2581\/revisions\/226038"}],"wp:attachment":[{"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/media?parent=2581"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-category?post=2581"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.megamenu.com\/wp-json\/wp\/v2\/ht-kb-tag?post=2581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}