The Divi theme includes a module called Full-Width Menu that allows you to include a menu at any place of your website with the Divi Visual Builder.

However, this module is not compatible with QuadMenu as it doesn’t include a theme location. For this reason, we have created a module for the Divi Builder that allows you to create a mega menu with our plugin.

How to add a QuadMenu module with Divi?

Before starting the process of adding the QuadMenu module, you must open the Divi Builder. After installing the theme you will see a button called Use Visual Builder on each page and post entry.

1. Click on the button and the include a new Fullwidth section.

2. Click on the Insert Module link.

Immediately you will see that there is the option of the QuadMenu module, click on it to add it. If you do not see it, put “Menu” in the search engine. By adding the module you will see the separate configuration options into three categories: Content, Design, and Advanced.

Content

In this tab, you can select the menu and the layout. To understand the layouts we recommend you to read our documentation where we explain the layouts behavior.

Design

In this tab, there are some customization options that allow you to set the menu module width, padding and margins.

Advanced

Within the Advanced tab, you will find options that could be useful for more experienced web designers, such as CSS and HTML attributes.

Here you can apply custom CSS code to the section, and you can also apply custom CSS and ID classes, which can be used to customize the section within the stylesheet of the child theme.

• CSS ID: Write an optional CSS ID to use in this module. You can use an ID to apply styles or use it as a link anchor.
• CSS Class: Write one or more optional CSS classes to use in this module. A CSS class can be used to apply styles. You can add multiple classes, separated by a space. These classes can be used in the child theme or in the custom CSS box to add to the page (from page settings) or to the entire site (from theme options).
• Custom CSS: You can apply custom CSS to the module from here. Within the custom CSS section, you will find a text field where you can add the code directly to each element. The code that is added to these fields is already wrapped in their respective labels, so you should only enter CSS rules separated by semicolons.
• Deactivate in: This option allows you to control in which devices the module will appear. You can choose to disable it individually on tablets, mobile phones or desktop computers. This is especially useful if you want to use different modules for each device, or if you want to simplify the mobile design by removing certain modules from the page.

Ready to install the QuadMenu Module?