Apply masonry layout

🧱 How to Apply a Masonry Layout in Globo Mega Menu

Enhance your website's navigation by arranging submenu items in a dynamic, grid-like masonry layout. This design allows for a visually appealing and organized display of menu items.

🔹 Step 1: Create a Top-Level Menu Item with a Mega Menu

1. Open the Globo Mega Menu app in your Shopify admin panel.

2. Navigate to your existing menu or create a new one.

3. Add a new top-level menu item that will serve as the parent for your masonry layout.

4. Assign a blank mega menu to this top-level item to provide a foundation for the masonry arrangement.

🔹 Step 2: Add 'Group of Items' Blocks

1. Within the mega menu editor, insert multiple 'Group of Items' blocks.

2. The number of groups you add will correspond to the number of columns in your masonry layout. For instance, adding four groups will create a four-column layout.

🔹 Step 3: Adjust the Width of Each Group

1. Customize the width of each 'Group of Items' block to ensure they align properly and create a balanced masonry effect.

2. Proper width adjustment is crucial for achieving the desired visual structure.

🔹 Step 4: Add Content to Each Group

1. Click the Add block within each 'Group of Items' block to add content.

2. Set the width of each content block to 12 to maintain consistent sizing and prevent the blocks from appearing too small.

✅ Final Result

By following these steps, your submenu will display items in a masonry layout, enhancing the visual appeal and organization of your website's navigation.

💬 Need help?

Email us at 📧 [email protected] - we’re happy to assist!