In order to be able to use these settings optimally, advanced technical understanding and knowledge of HTML and CSS are helpful.
A mega menu represents a navigation element that replaces the automatically generated navigation for a selected entry in the main navigation with a manually created layout. These instructions describe how to create a mega menu.
In this documentation, a mega menu is provided as an example in the main navigation item NEWS.
When creating a mega menu, please note the following points:
- To edit a mega menu, you must have template developer permissions.
- A mega menu can only be created for a main navigation item in the header area.
- The mega menu replaces the automatically generated navigation for the selected main navigation item in the desktop view.
- Switch to the Explorer
- Go to the directory that is the starting point for the navigation for which you want to create a mega menu.#
- In the example, this is /en/news/.
- Use the magic wand menu (top left of the screen) to create a new resource of the type Container page.
- Name the newly created container page exactly mega.menu.
- In the Explorer, click on the newly created file mega.menu.
- The Mega Menu Editor will open.
- An empty container will now be displayed.
- You can place any layout rows in this container to design your mega menu.
- In most cases, it is probably sufficient to drag exactly one layout row into the mega menu.
- For example, use a Row 4 columns (3-3-3-3) if you only want to insert menu entries.
- In the example, a Row 2 columns (4-8) was used.
- Now drag content elements into the containers created by the layout row.
- The link sequence element is particularly suitable for the mega menu when displayed as navigation.
- You can use it to manually specify exactly which links should be included in the mega menu.
- The Navigation element can also be used conveniently in the mega menu.
- You can also place all other elements in the mega menu.
- However, these are always hidden on mobile devices.
The mega menu is automatically hidden in the mobile view. Instead, the navigation structure located below the navigation item replaced by the mega menu appears.
The reason for this is that elements in the mega menu are usually not displayed satisfactorily in the mobile view. Therefore, it is generally better not to use the mega menu in the mobile view at all and to display the navigation structure instead.
If you still want to use the mega menu in the mobile view, you can set the mercury.mega.display property directly at the mega menu file to the value mobile.