Installation

The Mega Menu comes with the IT Infrastruture, you don't have to manually install any module. In order to be able to use the mega menu, you need to enable the CERN Menu module placed under the CERN Components group of modules.

How to create a mega menu

The Mega menu is a block type, created as a custom block. The latter consequently means that in order to create a mega menu, you need to navigate to the custom block creation page (/admin/structure/block/block-content) and create a custom block of type Mega Menu block.

As you will notice, the Mega Menu block accepts references of links, which means that the links should be created in order to be referenced by the Mega Menu. The Mega Menu block accepts references only from the Main Navigation menu. In other words in order to reference any link in the mega menu, you first need to create it in the Main Navigation menu.

 

Within the Mega Menu block, you will notice some available options to be filled:

• Parent Link: constitute the first level of the menu. In the above example, the parent links are the "About", "News" etc. As already mentioned before, the link that you will choose as parent link first needs to be created in the Main Navigation menu.
• Menu Column: constitute every column of links. Each column can have multiple rows. In addition, every column has configuration settings to set the column span for different devices. The settings is based on bootstrap's grid system. There are two types of menu columns:
  • Left-hand side menu column: it is the first menu column of the mega menu. It is highly recommended to use this menu column for blocks. In the configuration settings of this column you can set how many columns the left-hand side menu will keep. In the example above, the left hand side is set to keep 3 columns , while the rest 9 are kept by the right-hand side.
  • Right-hand side menu columns: The right hand side menu columns are all the rest menu columns of the mega menu. For example in the example above, the column marked in green is the second Menu Column while the column of "Accelerators" is the third etc. In terms of configuration, the right hand side columns will share 12 columns. In the example above the 3 right-hand side columns equally share 12 columns, as a result each one of them has 4 columns (12 / 3 = 4).
• Menu Entry: Each menu entry can be either a link or a view or a block. If you add a menu link, the sublinks of this menu items will be automatically inherited. In other words, you just have to reference the 2-level menu link and the 3-level menu links are automatically inherited from their parent. In addition you can also add a view of menu items.

How to place the Mega Menu in your website

After creating the Mega Menu, you just have to navigate to block layout and:

• Place the block you created under the Header section.
• Place the Main Navigation menu under the Header region, but you need to have it disabled.