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

[David]

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

[Benny]

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.

[David]

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

[Benny]

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.

[David]

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

[Benny]

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/

[Benny]

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

[David]

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.

[Benny]

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

[David]

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 🙂

[Benny]

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.

[David]

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 ?

[Benny]

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.

[David]

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;
}

[Benny]

Works like charm! Thank you very much.

[Author]

Posts