Creating a Mega Menu

Divi Mega Menu is quite simple to set up. First, you need to create the mega menu content and then assign that to a menu item you have. You can see the steps below.

1) Create the menu item

Head over to Divi Engine > Divi Mega Menu and create a new menu item.

You will now see the option to create the menu item and some settings below – see screenshot

You can use the builder to create whatever design you want.

Other settings are:

  1. Mega Menu Important Settings
    1. Custom Identifier (CSS class) – here you need to create a unique CSS class to differentiate between the menus and to make sure it is linked to the correct parent menu. It is important to add this otherwise it might cause issues on your site.
  2. Mega Menu Settings
    1. Menu Activate - Choose if you want the menu to show on click or hover
    2. Menu Animation – Select the animation that you want to happen when the dropdown shows.
    3. Animation Duration – Choose for how long you want the animation to take to complete.
    4. Custom Width - Set the max width of your menu
    5. Position relative to menu item? - Check this box if you want to have the menu dropdown relative to the menu item, you can then move it right and left using the setting below to fine-tune.
    6. Adjust from left - move the menu left or right.
    7. Adjust from top - move the menu up or down to get it perfect.
  3. Mega Menu Triangle Settings
    1. Triangle above menu? - Check this box if you want a triangle above your mega menu, you need to have position relative above.
    2. Triangle Color - change the color.
    3. Triangle Height - Change the size of the triangle.
    4. Triangle Distance From Top - move the triangle up or down.
  4. Mega Menu Close Icon Settings - if you are using click to activate, this would be an idea to show
    1. Show icon? -  If you are using click to open, do you want to have a close icon?
    2. Close icon code - change the code for the icon.
    3. Close icon color - change the color of the icon.
    4. Close icon font size - change the size of the icon.
    5. Close icon distance from the top - change the position of the icon from the top.
    6. Close icon distance from right - change the position of the icon from the right.

2) Assign the mega menu to a parent menu item

Go to Appearance > Menus

You now need to allow the use of CSS classes – on the top right you will see a box saying screen options, click that and then click on CSS classes.

Now create a menu item and assign that same CSS class(identifier) that you gave your menu to this parent menu item. See screenshot below

Thats it. You now have your fresh new Mega Menu!

Still need help? Contact Us Contact Us