Basic setting of Mega Menu

Similar to layout builder, you build a rich content mega menu by drag-and-drop the elements on the left column to the control panel, as the example below

There are 5 elements you drop into your mega menu:

• Image: insert image from your library

• Sub-menu: insert the sub-menu of the selected parental menu

• Module: insert a module within your mega menu

• Module position: insert all module in the selected position

• Custom HTML: insert the custom HTML.

With each element, you can configure the setting with the control panel on the right.

Besides, you can configure the mega menu container with this guide:

Step 1: Click on the outer box of the mega menu control panel.

Step 2: Configure the following setting within the container.

	1. Change from default width to fix width. When selecting this option, you can set the width layout and align the content.
	2. Set the layout width
	3. Align your layout
	4. Set padding value for container
	5. Set the background color for container
	6. Set the background image for container
	7. Set up the parameter for background image: Repeat - Size - Attachment - Position
	8. Set up the border parameter: Width - Size - Color

Note: you can also configure the rows and columns (padding, size, etc) setting separately

Popular Mega Menu Layout

Multiple columns with text

This is the most popular layout to use in Mega module since it's easy to build and bring better UX and navigation for visitors.

Example: JSN Venture 2 - Design menu

You can configure the mega menu with only Module element to archive the layout:

The module element assigns with respective menu module, configure as below:

Menu module with image

This layout has many used, but eCommerce websites favor this layout style because it brings the visual element to their products.

For example: JSN Shine - Pillow niche - Outfit Menu

The layout for this build in control panel, with menu module and image.

Make sub-menu to multiple-columns with mega menu

To make a menu like below, you need to drag sub-menu in your mega menu and it needs a custom CSS to transform the sub-menu like the demo.

Step 1: Insert the sub-menu in your mega menu

Step 2: Add the CSS code to your custom.css file. To find custom.css file, you can this guide.

@media (min-width: 768px) {

body#sunfw-master ul.sunfw-megamenu-sub-menu ul.sub-menu {

width: 100%;

display: flex;

justify-content: flex-start;

flex-wrap: wrap;

}

ul.sunfw-megamenu-sub-menu ul.sub-menu > li {

flex: 0 0 X%;

flex-flow: column;

}

Note:

1. X = 100%/ number of the column. For example, if you want to divide your sub menu into 4 columns, so X =100%/4 = 25%
2. This type of menu is the best used when all of the sub-menu is level 2 menu item.