Step 4: Style a Mega Menu

Written by the Divi Engine Documentation Team

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 Settings

Mega Menu Style

  • Menu Position: Select the Mega Menu position. Default Menu will make the menu appear on the default WordPress menu. Tooltip will make the menu popup. 
  • Tooltip Position Direction: Select the Tooltip position.
  • Menu Activate: Select the menu display style as Click or Hover.
  • Open Hover Delay Time: Define the open hover delay time.
  • Close Hover Delay Time: Define the close hover delay time.
  • Close on Scroll: Check to close menu on scroll.
  • Entrance Menu Animation: Select the menu animation.
  • Animation Duration: Define the menu animation time.
  • Full Width: Enable the YES button to force the menu full-width.
  • Custom Width: If not using the full-width button, define the menu width.
  • Menu Relative Position: Check to force this Mega Menu into a relative position and define the settings below.
  • Adjust From Left: Define position relative to the left.
  • Adjust From Top: Define the position relative to the top.
  • Adjust From Top Mobile: Define the position relative to the top on mobile.
  • Disable One Mobile: Enable the YES button to disable this Mega Menu on mobile.

Mega Menu Triangle Style

  • Triangle Above Menu: Check to place a triangle above your Mega Menu.
  • Triangle Location: Select the triangle location.
  • Turn Into Underline: Enable the YES button to turn the triangle into an underline on the menu item.
  • Triangle Color: Select the colour of the triangle.
  • Triangle Height: Define the triangle height.
  • Triangle Distance From Top: Define the triangle's distance from the top.
  • Triangle Distance Left/Right: Define the triangle's horizontal distance.

Mega Menu Close Icon Style

  • Show Icon Close: Check to activate a close icon.
  • Close Icon Code: Define an icon HERE and then paste the code into the input field. Paste in the letters and numbers after the "x" letter. 
  • Close Icon Colour: Select the icon colour.
  • Close Icon Font Size: Define the icon font size.
  • Close Icon Distance From Top: Define the icon distance from the top.
  • Close Icon Distance From Right: Define the icon distance from the right.

More Support?

Please email us at [email protected] if you are unable to get Divi Mega Menu working.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.