Possible to build this kind of mega menu with the gp simple mega menu

Hi there,

i don't fully understand.
In the image there is three columns. Do you mean if you hover on items in the left column it shows its submenus in the middle column and so on?

Thanks for the quick reply.

I meant, if one hovers on the links in the header, that the menu changes its submenu items.

I don't fully understand either, can you link us to the example site?

I have a figma layout and have to build it myself.

There is just the header bar with several linked sites, where i can hover over and the menu appears but shows different linked sub-sites according to the parent-site / topic.

In the sample implementation there is just one linked site where the menu unfolds. The other pages are normaly linked and and can be clicked.

Maybe i need just more mega menus in the header bar?

I will find an example how this works on other pages, maybe this shows it better.

I'm sorry but I really don't understand what you mean.

Can you link us to the example site and tell us the steps to see what you mean?

Let me know!

Here we go. Every parent link has a different submenu --> https://dynamics.microsoft.com/de-de/

I would rather use hover instead of click action but this is close to the menu i want to build.

Thank you for your effort!

The Simple Mega Menu CSS will do something very similar to that, you can apply it to as many menu items as you like. And it will work by default on Hover.

In your original image though there was other types of content in the sub menu eg. blue contact box. Is that a requirement ?

Yep, but i thought i could maybe hook it into the submenu easily?

I appreciate your help and patience very much!

You can try the the PHP Snippet in my GIST I have here for adding the hook inside a menu item:

https://gist.github.com/diggeddy/d536a711522f37fd54e6118a18d80f26

Is it possible to give the sub-menu inner a max-width but keep it 100vw? I added the code already and im on a good way --> http://dynamics.8tdqsf2iwx-zqy3jye103kg.p.temp-site.link/

You would do something like this:

1. Make the mega-menu submenu a flex container and justify the content center:

.mega-menu .sub-menu {
    display: flex;
    justify-content: center;
}

2. Create a CSS Rule for the mega menu columns eg. mega-menu-col-3
And set the individual Columns width eg. 400px. So the total 3 column width will be 1200px.

.mega-menu-col-3 .sub-menu li {
    max-width: 400px;
}

Repeat that logic for the other column settings you use

Problem is, i have 3 columns but not always and it should be aligned with the logo. Isnt it possible to build it entirely with generateblocks (wouldnt be a huge problem then).

The hook you posted above isnt working either (or i did something wrong).

Ah apologies, that GIST was part of a larger project. I have just updated it so it can be used in isolation.
I have updated the last comment. One minor change is the use of _ vs - before the item slug

Ah i see. Will try tomorrow. Would it be possible to hook the entire submenu in with this? So maybe one hovers over a menu item and in the appearing mega menu everything is built with generateblocks. So i could set the inner with etc.