Skip to content

Content

Implementing Mega menu (2025)

To create the new Mega Menu layout released in June 2025, please follow this guide. If you are not yet familiar with updating the menus, you can first look at the manual Change the navigation menus.

The steps in short:

  1. Create a new menu
  2. Add main navigation items
  3. Make a standard dropdown menu with one level
  4. Make mega menu foldout with multiple levels
  5. Make mega menu foldout with side menu and multiple levels
  6. Link the new menu to the menu positions
  7. Test and correct menus

A note on forehand: as long as the menu is not linked to any menu location, the current menu will be visible. From the moment step 6 is executed, the new menu will be visible to all visitors. So make sure the new menu is filled with the correct connect as far as possible, before making the switch.

Step 1: create a new menu

To create a new menu go to Appearance > Menus and press the link ‘Create a new menu‘ next to the dropdown with existing menus, see:

Enter a menu name for the new menu, for instance Mega Menu and press the button Create Menu.

Do not yet select a menu location, this will immediately display the new menu. First add menu items to the menu.

Make sure you save the menu from time to time, so your progress is saved.

Step 2: add navigations items

When the menu is created you can add menu items. Start with the main navigation. You have two options here:

  1. For each menu item that is going to open a foldout menu, add a custom link
  2. For main menu items linking to a page, you can select the page from the corresponding post type. This can be done for menu items link Projects, Blogs and About us.

2.1 Creating a custom link

To make an item with a foldout, you can add a custom link. This can be done by opening the section Custom Links under Add Menu items in the sidebar on the left. For the fold out menu, it is also possible to add a link to a post, when using a fold out menu without a side menu, it is best to make a menu item as described in 2.2.

  • In the field URL enter a hashtag (#)
  • As Link text you can enter the desired text, for instance ‘Activities’, ‘Products’, ‘Services’
  • Press Add to Menu to add the menu item in the list of menu items.
  • Optionally you can drag the menu item to its required position.

2.2 Add a menu item to a post from the website

To add a link to any item from the website you can use the matching section under Add menu items. For instance, to add the About page follow these steps:

  1. Open the Pages section and use either ‘Most recent’, ‘View all’, or ‘Search’ to find the desired page
  2. Check te box in front of the desired page and press Add to menu

Some tips about adding menu items:

  • You can select multiple pages at once. When clicking Add to menu all items will be added to the bottom of the menu.
  • It is possible that you miss a post type in the list under Add menu items, for instance, you do not see an option to add Cases. In that case click Screen Options in the top right corner of the page and check the box for each post type or category you want to see. It will be added to the list.
  • An overview page can be added from the Post type dropdown. If you want to add the link to the Projects overview, open the Cases section under Add Menu items. Click View all and select the first item ‘All cases’ and add it to the menu.

Step 3: Make a standard dropdown menu with one level

To make a dropdown menu add menu items and drag them in the position they are attached to a main menu item. No further settings are needed.

Step 4: Make mega menu foldout with multiple levels

To make a mega menu with a larger foldout, used for the Services menu, use the following steps. The tree used in this menu is as follows:

  • Main menu item (e.g. ‘Services’, level 1)
    • Category (e.g. ‘projects’, level 2)
      • Service item (e.g. ‘project management’ level 3)
      • service item (level 3)
    • Category (level 2)
      • service item (level 3)
  1. Open the main menu item and find the field Choose submenu layout. Choose Mega menu as layout type.
  2. Optionally add a description in the Description field. If this field is not visible yet, open the Screen options with the button on the top right of the screen and check the box ‘Description’ under ‘Show advanced menu properties’
  3. Check the box Menu item has image and select an image that matches the menu subject.
  4. Add the level 2 menu items, these will be displayed as categories in the menu. If the item should be a link, add a link as described under 2.2. If the item is only used as label, use a custom link as described under 2.1. Drag them to place them as sub menu under the main menu item.
  5. Add the level 3 menu items, these are usually links to post items. Drag them to the desired level 1 sub menu. The tree of menu items should look like the example tree above.

Pro tip: to be able to easily drag and drop the menu items in the correct place, drag the item you are currently editing to the bottom of the menu. When you are done with adding menu items, you can drag the entire tree to the correct location.

Step 5: Make mega menu foldout with side menu and multiple levels

Create a sub menu with a foldout and side menu can be used for Activities and Products. The process works similar to step 4, but there is one extra level in the tree:

For Activities

  • Main menu item (custom link with #, e.g. ‘Activities’, level 1)
    • Activity (e.g. ‘TSG Retail’, level 2)
      • Category (e.g. ‘Fueling solutions’ level 3)
        • Product (e.g. ‘adBlue solutions’ level 4)
        • Product
      • Category (level 3)
        • Product (level 4)
    • Activity (level 2)
      • Category (level 3)
        • Product (level 4)

For products

  • Main menu item (custom link with #, e.g. ‘Products’, level 1)
    • Parent Product category (e.g. ‘Energy solutions’, level 2)
      • Child Product Category (e.g. ‘Fueling solutions’ level 3)
        • Product (e.g. ‘adBlue solutions’ level 4)
        • Product
      • Child Product Category (level 3)
        • Product (level 4)
    • Parent Product category (level 2)
      • Child Product Category (level 3)
        • Product (level 4)

You can follow the same steps as described in step 4, but with a few extra remarks

  • The image and description in step 2 and 3 can be added on the Activity in Level 2. It’s best to leave the image empty, to use the default activity/product image. When the description is empty the introduction field of the activity/category is used
  • On level 2 an icon can be attached. This is de activity icon, or an icon that is linked to the product category. If left empty the icon that is selected in the activity / product category is displayed.

Step 6: Link the new menu to the menu positions

To make sure the new menu is displayed, you have to link the menu to the correct Menu locations. In the section Menu Settings select two Display  locations, for desktop and mobile:

  • Main menu with mega menu foldouts
  • Mobile menu with mega menu foldouts

Save the menu and check the website. You now see the new mega menu with the fold outs. It is possible to make a separate menu for mobile, but it is best to keep the menu in sync on desktop and mobile.

Step 7: Test and correct menus

After the menu is assigned to the locations you should test and correct it. Check the content of each item to make sure all links work and everything is displayed as desired.

Instead of publishing the entire menu at once, you can also fill in foldouts while the menu is already published. In this case make sure the main menu is correct. All other data can be added in steps later.

development omgeving
Let op! Je bekijkt de development-omgeving. Wijzigingen die je hier maakt, zijn niet op de liveomgeving te zien.