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

Yes. The accompanying CSS in that GIST should make the submenu wrap the width of the inside navigation ( that could be adjusted to make it the full width of the nav / screen ). And its just an empty container, so you can build everything using GB

I doesnt work for me. Could you help me figure out how to do it, without the mega menu? I wont need a mega menu if i build it myself with generateblocks. I only need a hook that appears if i hover on specific menu items. I would then build several gb elements and hook them i according to the menu item hovered over.

What part doesn't work ?
NOTE: I updated the CSS in the GIST to make it more specific.

The hook wont appear. Maybe i miss something. I need something like this --> https://snippetclub.com/building-a-mega-menu-with-generatepress-blocks/ (the snippet is missing because its a premium forum). I guess i only need a snippet that hooks something in if the label is called "hook123" for example.

Did you follow the steps here?

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

Once the snippet is added, you simply need to:

1. Add a top level menu item.
2. Give it a Menu Label eg. My Menu
3. in its CSS Class field add: gp_mega_item menu-item-has-children

See here how to add the classes to menu items

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

So the new menu item will have a label of My Menu which will result in its slug being my-menu.
And the function will create a hook called gp_mega_item_my-menu

4. Now in GP Element, add new Block element, and in the Hook list select the Custom and in the field add: gp_mega_item_my-menu

If i do this, i see <ul class="sub-menu custom-sub-menu">

but the hook is missing. I added the code snippet, i created an element (and to make no mistake, i even called the menu item My Menu and copied the entire hook name).

http://dynamics.8tdqsf2iwx-zqy3jye103kg.p.temp-site.link/dynamics-consulting/

http://dynamics.8tdqsf2iwx-zqy3jye103kg.p.temp-site.link/wp-content/uploads/Bildschirmfoto-vom-2023-03-31-12-06-48.png
http://dynamics.8tdqsf2iwx-zqy3jye103kg.p.temp-site.link/wp-content/uploads/Bildschirmfoto-vom-2023-03-31-12-07-03.png
http://dynamics.8tdqsf2iwx-zqy3jye103kg.p.temp-site.link/wp-content/uploads/Bildschirmfoto-vom-2023-03-31-12-07-23.png

I screenshotted everything

Hmmm.... in the snippet.
Just before this line:

<?php do_action($custom_hook_name); ?>

Add:

<?php echo $custom_hook_name; ?>

This should print the hook name in the menu item.

Renaming of slugs isnt working i guess. If i make an entirely new menu item, it works. Sorry and thank you very much!

Ah, ill take a close look at this, perhaps theres a nicer method to write the class name.
Let me know how you get on, i would like to see how this develops :)

You can see it here http://dynamics.8tdqsf2iwx-zqy3jye103kg.p.temp-site.link/dynamics-consulting/

First item is linked already. Only thing i dont understand entirely is the width, because there is a small difference between width of the .site-header and the mega menu gb box.
And one thing i have to figure out, is how to get the box-shadow above the sub-menu. Maybe with z-index but this wont work and i dont know how.

Looking at your CSS, using the position: fixed means you can scroll away from the navigation and the sub menu will follow you.

Try this CSS instead:

.main-navigation .inside-navigation,
.main-navigation .gp_mega_item {
    position: static;
}
.main-navigation .gp_mega_item .sub-menu.custom-sub-menu {
    left: 0;
    width: 100%;
} 

It will move the relative parent up to the header.

How should the box-shadow look ?

Ah, this fixes the strange difference in width. Thanks!

Atm the box-shadow css looks like this:

.site-header {
box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
z-index: 5;
}

It works, but the shadow has to be over the mega-menu too.

Try this CSS to add your box-shadow:

.site-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
}

Works like charm! Thank you very much.