Step 5: Style a Mega Menu
Remember to update or publish your work as you go. Follow the images below.
1.) 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 your new Mega Menu, it is important to spend time learning how to style using the Divi Builder. Please visit Divi's tutorials by clicking HERE.
2.) 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.
3.) Mega Menu Style.
- Menu Position: Choose the position for this Mega Menu. Default Menu will make it appear from the default WordPress menu. Tooltip will make this menu appear as a Popup.
- Tooltip Position Direction: On Tooltip, where would you like this Mega Menu to appear from?
- Menu Activate: Choose how you want this menu to appear. Click or Hover.
- Hover Delay Time: On hover, set the time for this menu to disappear.
- Close on Scroll: On click, check this box if you would like this menu to close on scroll.
- Menu Animation: Choose animation for this Mega Menu.
- Animation Duration: Set the time it takes for the animation to complete.
- Full Width: Enable switch to force this Mega Menu fullwidth.
- Custom Width: Set the custom width of this menu.
- Menu Relative Position: Check this box if you want to have this Mega Menu appear in a position relative to the parent item. Define the position using the three sliders 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 switch to disable this Mega Menu on mobile.
4.) Mega Menu Triangle Style.
- Triangle Above Menu: Check this box if you would like a triangle above this Mega Menu.
- Triangle Location: Choose the position of the triangle.
- Triangle Color: Choose the colour of the triangle.
- Triangle Height: Choose the triangle height.
- Triangle Distance From Top: Choose the triangle's distance from the top.
- Triangle Distance Left/Right: Choose the triangle's horizontal distance.
5.) Mega Menu Close Icon Style.
- Show Icon Close: Check this box if you have chosen to activate this menu by click.
- Close Icon Code: Choose 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: Choose the icon colour.
- Close Icon Font Size: Choose the icon font size.
- Close Icon Distance From Top: Choose the icon distance from the top.
- Close Icon Distance From Right: Choose the icon distance from the right.