Install a Full-Width Menu Module in Divi

The default layout of the Divi theme came with a primary menu location where you a place the main mega menu. However, if you need to include a new menu in Divi you can use the full-width menu module.

This module allows you to move the navigation menu anywhere on the website you want. It can be very useful to add a secondary menu or move the main menu below.

QuadMenu Module

Since version 1.4.6, we’ve fixed the issues with the fullwidth module 1.4.6 and included a custom module that allows you to include this Divi Mega Menu in any place of your theme.

If you need a mega menu for your theme we strongly recommend you to install our plugin that will help you to save a lot of time and you can download for free from the WordPress Repository.

How to add a full-width Menu module with Divi?

Before starting the process of adding this module, you must open the Divi constructor. After installing the theme, at the top of the editor, you will find the option to use this tool. You will see this button on each page or a new entry.

In Divi’s builder you will have access to the modules and in this case, we will use it in its visual mode, by clicking on Use visual builder. The other route is to click Activate visual builder when we have already logged into WordPress in the user interface.

Click on the + button of the visual builder to add a new module, which can only be added within the rows. Remember that if you are building the page from scratch, you must add a row first.

Immediately you will see that there is the option of the full-width 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.

Divi to the rescue

Within each item of the module settings, you will see that there is a link to the Divi help system. It is a multimedia gallery of instructions, tutorials and more about configuration and use of the constructor. Videos can be opened individually (like a pop-up window) to follow the process step by step. There are more than 70 videos and they are available only in English.

Search filters options

The filters allow you to customize the options you want to see in the settings window. They include: Modified Styles, Adaptive Styles, and Active Content.

Content Options

In this window, we can modify all the elements of the content, such as the menu and the background.

  • Menu: You will see available the menus that you created in the Appearance section in Menus.
  • Background: You have several options to choose from in the background of the module: color, gradient, image, and video.
  • Administration label: In the constructor, you will see this module with the name Full-width menu in the constructor. By changing the administration label you will be able to find the module more easily. In the structure view of the constructor interface, you will see these tags inside the module block.

Design options

In this tab there are many options for customization of the module in terms of appearance, you can modify almost everything!

Design

  • Opening submenus: By default, all submenus open below the main bar. If you put the menu near the bottom of the page, you may want these submenus to open upwards so that they do not extend outside the screen area. Here you can choose the direction in which they will open (up or down).
  • Full-width menu links: By default, top-level links are placed within the limits of the module. If you want to eliminate that limitation and the menu extends to the width of the screen, activate this option.
  • Links
  • Text color: Here you can choose the text contrast. If the module is displayed on a light background, the text color should be dark. If it is displayed on a dark background, the color of the text should be clear.
  • Active link color: Active link colors are those that are highlighted in the menu to show the location on the current page. In this option, the color of the highlight is changed.
  • Text color of the drop-down menu: By default, the text within the drop-down menu inherits the color of the main menu. You can choose the color you need.
  • Text color of the menu in mobile version: By default, the menu text in the mobile versions inherits the color of the main menu. If you want to use a different text color, this is the option.
  • Text orientation: This drop-down menu allows you to specify the orientation of the text: aligned to the left, centered or aligned to the right.

Dropdown menu

  • Background color of the drop-down menu: By default, the drop-down menus inherit the background color defined in the previous option. In this option you can change it.
  • Line color of the pull-down menu: Within the drop-down menus, the elements are separated by a line of 1 pixel. If you want to customize the color of that line, select it with this option.
  • Background color of the menu in mobile version: On mobile devices, the menu module is transformed into a more user-friendly design with that type of screen. You can control the background color of the drop-down menu on mobile phones, regardless of the one that corresponds to desktops.
  • Text Menu
  • Menu Source: Divi includes dozens of beautiful fonts provided by Google Fonts. By default, Divi uses the Open Sans font for all text on the page. You can change the font of the menu text by selecting it from the drop-down menu. You can also customize the text style with bold, italic, uppercase and underline options.
  • Menu Font weight: The options are: Light (fine), Standard, Semi Bold, Bold and Ultra Bold.
  • Font style menu: The options are: Italic, Shift, Versa, Underline and Strikethrough.
  • Menu text size: You can drag the range selector to increase or decrease it, or you can type the size value of the text you want in the input field to the right of the selector. The input field supports different units of measurement, such as px, em or pt.
  • Space between letters of Menu: If you want to increase or decrease the separation between characters, use the range selector to adjust it or write the value of spacing in the input field located to the right of the selector. The input field supports different units of measurement, such as px or em.
  • Menu line height: If you want to increase or decrease the line spacing, use the range selector to adjust or enter the value in the input field to the right of the selector. The input field supports different units of measurement, such as px or em.
  • Menu text shadow: Once the shadow style is activated, you can customize it further. To disable the custom style of text shadow, choose the None option.
  • Menu text shadow horizontal position: A negative value will place the shadow to the left of the text and positive to the right side.
  • Vertical position of shadow of text of Menu: It is the vertical distance of the shadow with respect to the text. A negative value will place the shadow above the text and a positive one down.
  • Shadow blur strength of Menu text: The higher the value, the greater the blur; the shadow becomes wider and clearer.
  • Menu text shadow color: Choose the color of the selector shadow.
  • Size
  • Width: By default, the width of the module is assigned to 100% of the column that contains it. If you want to modify that width you can do it using the slider. For example, a value of 50% will limit the width of the module to the middle of the column that contains it.
  • Alignment of the module: Here you can choose the position of the module in case you have modified the width in the previous setting: aligned to the left, to the center or to the right.

Spacing

  • Custom margin: The margin is the space that is added outside the module, between its ends and the contiguous elements (up, down, left or right). You can add custom margin values to any of the four sides of the module. To eliminate the custom margin, delete the added value of the entry field. By default, these values are measured in pixels, but you can use custom units of measure.
  • Custom fill: The fill is the space that is added inside the module, between its ends and the internal elements. You can add custom fill values to any of the four sides of the module. To remove the custom fill, delete the added value of the entry field. By default, these values are measured in pixels, but you can use custom units of measure.

Edge

  • Rounded corners: Here you can control the radius of the corner of this module. Activate the link icon to control all four corners at the same time, or deactivate it to define a custom value for each one.
  • Edge Styles: This option controls the appearance of the four edges individually: left, right, top and bottom.
  • Border width: By default, the borders have a width of 0 (no border). You can increase this value by dragging the range selector or writing it in the entry field to the right of the selector. The input field supports different units of measurement, such as px, vh, vw, etc.
  • Edge color.
  • Edge style: The edges include eight different styles: solid, dotted, striped, double, groove, ridge, inside and outside.

rShadow

Use these settings to add a shadow in the module. You can control the axial position and the strength of the shadow by assigning values in pixels; change the color with the selector, and the position with respect to the edge (inside or outside).

Filters

Select here the type of filter to apply to the module: you can control values of Hue, Saturation, Brightness, Contrast, Invert, Sepia, Opacity and Defocus. You can also define the mix mode with the image or background color you have chosen for this module, with the following options: Normal, Multiply, Screen, Overlay, Darken, Lighten, Color overexposure, Color under-exposure, Strong light, Light Soft, Difference, Exclusion, Hue, Saturation, Color and Luminosity.

Animation

  • Animation style: Choose an animation style to activate the animations in this element. The options are: Fade, Slide, Bounce, Zoom, Flip, Fold or Roll. Once activated, you can further customize the animation style. To disable the animations, choose the None option.
  • Repeat animation: By default, animations will only run once. If you want the animation to be repeated continuously you can choose the Repeat option.
  • Animation direction: This option is available for all animation styles, except Fade. Choose one of the five different animation directions, each of which will adjust the initial and final position of the animated element: Center, Right, Left, Up, Down.
  • Duration of the animation: Increase or decrease the speed by adjusting the duration of the animation. The units are in milliseconds and the default duration of the animation is one second.
  • Animation delay: If you want to add a delay before executing the animation, you can designate that delay here in milliseconds. This can be useful if you use several animated modules together.
  • Animation intensity: This option is available for all animation styles, except Fade and Bounce. The intensity affects the softness or strength of the animation. If you lower the intensity, the animation will be softer and subtler. If you increase it, the animation will be more aggressive and agile.
  • Initial opacity of the animation: If you increase the initial opacity, you can reduce or eliminate the fade effect that is applied to all animation styles.
  • Animation speed curve: Here you can adjust the animation attenuation method. The options are: Input and output attenuation, Attenuation, Input attenuation and Output attenuation. Diming the input or output of the animation will create a smoother effect compared to a linear velocity curve.
  • Animation of the drop-down menu: Defines the type of animation of the submenus when displayed. You can choose between Fade, Expand, Slide and Flip.

Advanced Options

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 this module?