This page is a demonstration of custom code in WordPress. The Mega Menu will be visible if you hover the mouse over “Dropdown”.

The mega menu is added by pure HTML and CSS.

You can:

• Add links to your pages / posts – just use the link to the page.
• Save the Mega Menu as a template part. Now you can use this menu anywhere

The mega menu is based on this W3 Schools Tutorial: How to Create a Mega Menu.

After a similar manner you can add any code by HTML, CSS and JavaScript.

WordPress Menus

You can create all these menus manually. However, that would be somewhat cumbersome. A far better alternative is to add menus via Gutenberg markup along these lines:

<!-- wp:navigation {"ref":649,"layout":{"type":"flex","orientation":"vertical"}} /-->

Now, how do we know the number of the menu is 649? An easy way to to this is to create a new page. Add one or more menus, where you want them in the mega menu.

Then change to from the visual editor to the code code editor – then you have the codes you need.

Now don’t save the page, all we want is the reference to the menu.

How to get the Mega Menu on all pages

The cure is simple: add the mega menu to all page tempates.

Create your own Mega Menu

Perhaps it’s more easy to create a mega menu with HTML and Flexbox CSS. This page is just a sketch, and there are weird collisions between the W3 CSS and my present CSS in the theme.