Skip to main content

Style a Divi Mega Menu

Watch This Video​

Introduction​

Follow this information to style your Mega Menu.

Divi Builder Style​

One reason why Divi Engine has focused on working with the Divi Theme is because of the endless styling possibilities using the Divi Builder. To style the contents of your new Mega Menu, it is important to spend time learning how to style using the Divi Builder. Click HERE to visit Elegant Themes.

Mega Menu Style​

We have also created the ability for you to style your Mega Menu from within Divi Engine. To use these features go to your Mega Menu in Divi Engine and scroll down the page.

Mega Menu Style

  • Menu Position: Select the placement for the Mega Menu.
  • Tooltip Position Direction: Determine where the tooltip appears relative to the menu item.
  • Menu Activate: Choose to show the menu on a click or hover.

Timing and Animation​

  • Open Hover Delay Time: Delay time before the Mega Menu displays on hover (milliseconds).
  • Close Hover Delay Time: Time before the menu disappears after hover (milliseconds).
  • Close on Scroll: Check to close the Mega Menu when the page is scrolled.
  • Entrance Menu Animation: Select the animation type for the Mega Menu's appearance.
  • Animation Duration: Set the duration for the animation to complete (seconds).

Dimensions and Responsiveness​

  • Full Width: Enable to make the menu full width.
  • Custom Width: Define a custom width for the Mega Menu (pixels).

Positioning and Mobile Settings​

  • Menu Relative Position: Check to adjust the menu drop-down relative to the menu item.
  • Adjust From Left/Top: Fine-tune the Mega Menu's horizontal and vertical position (pixels).
  • Change top position on scroll?: Enable to change the menu's position on page scroll.
  • Disable on Mobile: Disable the Mega Menu on mobile devices.

Indicator and Close Icon​

  • Triangle Above Menu: Add a triangle above the Mega Menu.
  • Triangle Location: Choose the location for the triangle indicator.
  • Turn Into Underline: Switch the indicator to an underline.
  • Show Close Icon: (If applicable) Opt to include a close icon in the Mega Menu.
  • Close Icon Code: Enter the designated code for your icon.
  • Close Icon Color: Customize the color of the close icon.
  • Close Icon Font Size: Set the size of the close icon (pixels).
  • Close Icon Distance From Top/Right: Adjust the position of the close icon from the top and right (pixels).

After adjusting these settings, ensure to save your configuration to apply the changes.

Last updated on