This documentation provides comprehensive insights to create Mega Menu using the Navigation Block developed by Zoloblocks.

Activate Navigation Block

To use the Navigation block from Zoloblocks, you must first enable the block.

1. Go to WordPress Dashboard > Zoloblocks Plugin dashboard.
2. Then Click the Blocks Tab.
3. Search by the Navigation block Name.
4. Enable the Navigation block.

Adding a block to the editor

1. Click the Toggle Block Inserter icon and a sidebar will appear on the left side, All the blocks will be visible here.
2. Search by the Flipbox block name.
3. Then select the appear blocks ( with zoloblocks logo T.R corner).
4. After Drag and Drop it on the page.

After Inserting the blocks, Follow this.

1. Click on the Document Overviewer button and the Blocks list view will appear.
2. Here appears the Flipbox block.
3. After on the right side, Click on the Block. Then the Flipbox block details appear.
4. Here show all the control tabs( Basic, Style, Extra ) of a block.

Set Navigation

Items with a Mega Menu

Start with any menu items, please select the with it.

1. Click on the ” Start Blank ” button to select the menu and it will appear new items.

2. Select the ” Items with a Mega menu ” for the mega menu items.

3. After adding the Mega Menu item, it will appear on there.
4. On the list view the mega menu will appear.

5. Hover over the Mega menu item, adding new items will appear.
6. Click on the ” + ” icon to add new items for the mega menu.

Add Container – Inner Container

To working with Multiple section add inner container on the container,

1. Select the Container from the List View controls,
2. Search by the ” Container “.
3. Then select the zoloblocks container block.

After select the container make multiple section by duplicating it,

4. Select the inner container which added then right click on it and menu will appear,
5. Select the ” Duplicate ” option or press ” Tab + Command + D ” to duplicate it.

Add Content into Inner Container

Add Content or blocks on the inner container, Choose any blocks from there and make your own customization,

Add Advanced Heading Block

Select any inner container and start adding blocks on it,

1. Select the Container from the Block section,
2. Click on the ” + ” icon on the selected container,
3. Search by the Block name ” Advanced Heading “,
4. Apppear the blocks and select it.

Follow the to customize the Advanced Heading block.

Add Advanced Image Block

Now select the container again to add another block on it,

1. Select “Container” from the list view, right-click on it, and a menu with options will appear.
2. Click the “Add After” button to insert a new block following the previous one.

Now Add image block right after the heading blocks by following,

3. Select the Advanced Image block to and add image on it.
4. After adding the image it will appear like this,

Follow this to use the ” Advanced Image ” block,

5. After adding all the blocks on the inner container, It looks like this.

Add Menu Items on Container

Now add the list block on this container for menu list items,

Add List Block

Use the List block of zoloblocks to use it as the Menu items.

1. Select the List blocks for list view.
2. List item will be selected and the controls appear on the right side.
3. Presets: Select the presets for the list block.
4. Enable Link to enable the list items as link.

Navigate to the ” Add List ” section to edit the items,

5. Title: Set the title for the lists.
6. Link: Set the link for the navigating the list items.

After selecting all the list items, it will appear like this. Read more to use the ” List ” block.

Once Complete the Second Container it will appear like this,

1. Advanced Heading and List blocks on the container section.
2. The appears on the section.

After Complete All Content on Menu Section

Check the list view section and the menu section all the changes are made after completing this,

1. First Container added blocks ( Advanced Heading, Advanced Image , Advanced Paragraph ).
2. Second Container added blocks ( Advanced Heading, List ).
3. Third Container added blocks ( Advanced Heading, Fancy List ).

Customize the Mega Menu

Make the customize the mega menu for forever,

Basic Tab

The Basic tab controller displayed here offers the flexibility to adjust the layout of blocks according to your preferences.

General Section

Go to Basic > General

Select the general section by following the customizer,

1. Layout Type: Select the Layout type for the mega menu ( Default, Fullwidth, and Custom). Custom has several feature.
2. Directions: set the direction for the mega menu ( Left, Center, Right ).
3. Width: Set the width for the mega menu.
4. Offset: Set the offset to set the position in horizontal direction, Negative number are allowed.

Style Tab

Provide the controller to make the visual appearance or presentation of the tabs. This includes aspects visually appealing and cohesive with the overall design of the interface.

Wrapper Section

Go to Style > Wrapper

Make the style of the wrapper by following controls,

1. Background: Set the background color of it.
2. Padding: Set the inner space by setting the padding.
3. Border: Set the border for the mega menu area.
4. Box Shadow: Set the shadow for the box.
5. Border Radius: Set the border radius by setting the numbers.

Extra Tab Control

The extra tabs provide the controls of any blocks. You can make different visual layouts by following these Controls.
Click to learn more>>.

Video Assist

Check the Demo. The Video Tutorial Will be coming Soon!

Thanks for being with us!