In addition to the mega-menus automatically created by the theme for the categories as described in this article, you can create custom mega-menus associated to any custom menu you like.

 

By default, the theme only displays categories in the main menu. However, there are scenarios where you need to add a custom menu option to allow your visitors to access a page that’s not a category (i.e. about us, contact us, our brands, sale, etc) or you might want to add a custom dropdown or mega-menu that doesn’t contains categories, but custom content coming from a static block.

 

You can do so by creating custom menu options in the config section of the theme:

  1. In the Admin panel, navigate to System > Configuration > Theme Setup
  2. Click the Header tab to expand it
  3. Click the Add menu item of the Main Menu Links to add a new custom menu option. The new option will be added after any category link already displayed in the main menu.
  4. Enter the Name of the menu option (as it will be displayed on the frontend), the URL key (or leave empty if you don’t want the menu option to be clickable), the menu Type (single link, dropdown or mega-menu) and the associated Static Block that will be displayed when the menu option is hovered (only required if you selected dropdown or mega-menu)
  5. Click the Save Config button to save your changes

Custom links in the main menu

 

Content of the custom Mega-Menu

The content inside the static block to be displayed as a custom mega-menu can be any HTML content you like. Remember, you can and should use the grid system of Foundation 5 included with the theme. This way, you can easily create responsive columns and breakpoints. As an example, we are providing below an HTML code you can insert in the static block to generate a six columns list of links. Just create a new Static Block, enter the content below and follow the steps outlined above to create a custom menu option.

Be sure to write semantic and properly formatted HTML code. Errors in the HTML code inserted into any static block, like missing closing tag, will break the frontend
<div class="row flushrow" style="margin: 0 0 10px;">
    <div class="medium-2 flushrow columns">
        <ul>
            <li class="label">Category 1</li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-1-url">Subcategory 1</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-2-url">Subcategory 2</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-3-url">Subcategory 3</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-4-url">Subcategory 4</a></li>
        </ul>
    </div>
    <div class="medium-2 flushrow columns" style="border-left: 1px solid #e5e5e5">
        <ul>
            <li class="label">Category 2</li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-5-url">Subcategory 5</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-6-url">Subcategory 6</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-7-url">Subcategory 7</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-8-url">Subcategory 8</a></li>
        </ul>
    </div>
    <div class="medium-2 flushrow columns" style="border-left: 1px solid #e5e5e5">
        <ul>
            <li class="label">Category 3</li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-9-url">Subcategory 9</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-10-url">Subcategory 10</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-11-url">Subcategory 11</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-12-url">Subcategory 12</a></li>
        </ul>
    </div>
    <div class="medium-2 flushrow columns" style="border-left: 1px solid #e5e5e5">
        <ul>
            <li class="label">Category 4</li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-13-url">Subcategory 13</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-14-url">Subcategory 14</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-15-url">Subcategory 15</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-16-url">Subcategory 16</a></li>
        </ul>
    </div>
    <div class="medium-2 flushrow columns" style="border-left: 1px solid #e5e5e5">
        <ul>
            <li class="label">Category 5</li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-17-url">Subcategory 17</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-18-url">Subcategory 18</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-19-url">Subcategory 19</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-20-url">Subcategory 20</a></li>
        </ul>
    </div>
    <div class="medium-2 flushrow columns" style="border-left: 1px solid #e5e5e5">
        <ul>
            <li class="label">Category 6</li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-21-url">Subcategory 21</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-22-url">Subcategory 22</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-23-url">Subcategory 23</a></li>
            <li><a href="{{config path="web/unsecure/base_url"}}subcategory-24-url">Subcategory 24</a></li>
        </ul>
    </div>
</div>

The code above will render a mega-menu like this:

Custom mega-menu example