-
Dear all,
thank you for this topic and the detailed explanation.
I successful added the PHP and CSS code you mentioned.
I also added “gp_mega_item” and “menu-item-has-children” to the css-field of my top-level menu. I created a sub-menu as well.
Then I created a new hook:
name: mega menu
hook: custom hook
custom hook name: gp_mega_itemAppearance: all sites
However it does not show a mega menu.
It only show a second arrow next to the top-level menu name.
How can I fix that?
Thank you, best regards Sebastian
-
Hi there,
read my comment here to make sure you have the correct custom hook name:
-
Thank you David.
Where can I find the “slug” name of the menu?
Do you use the “menu name” or the “navigation label” of the top level-menu?see screenshot menu: https://junge-eltern.com/wp-content/uploads/2023/07/Bildschirmfoto-2023-07-31-um-16.02.37.png
see screenshot hook: https://junge-eltern.com/wp-content/uploads/2023/07/Bildschirmfoto-2023-07-31-um-16.07.09.png
In my case the custom hook name is “gp_mega_item_mein_menu”. However, it does not work.
PHP and CSS were added.
-
The Navigation Label you first add is the slug, and spaces will be hyphenated.
SoMein menuwill have a slug ofmein-menuAnd your hook will be:
gp_mega_item_mein-menuNote: once a menu item is saved, the slug is locked.
So even if you change the label the slug will remain the same. -
Hey all. This looks like a great solution and something that I am trying to implement, but somewhere it is going wrong.
I have created a custom plugin to just hold this code, then added the PHP and CSS from the gist. On the html output of the page I can then see a dropdown icon has appeared, but when I inspect the element in dev tools the “sub-menu custom-sub-menu” li is empty.
-
It was never built to work with a pre-existing page. So that could be the issue.
Add a Custom Link to your menu,
with just the#URL
and a Label eg.Test Menu
which should return a slug oftest-menu
and a hook of:gp_mega_item_test-menu -
Ah! Perfect. Now it’s working 👍
-
Glad to hear that
-
I got it working finally. Thank you very much!
It raised a new question. How can I create further mega-menus (top-level)? I just created another (block/hook) with a new custom-hook name and added a 2nd top-level menu like before.
However it does not link the menu-link with the (new) custom hook.
-
Make sure the Element has the Display Rules set.
And double check the slug / hookname are correct.
To help with this i updated my GIST.In the frontend HTML it outputs a HTML comment inside the submenu
<ul>which displays the hook name e.g<!-- gp_mega_item_mega-two --> -
Thank you. I checked all fields again.
I tried to add the first hock/element to the 2nd top-Level menu, which is successfully linked to the 1st top-level menu. It does not work.Is there something I have to add/change in the configuration of the 2nd top-level menu? It seems that linking an element to the 2nd top-level does not work in some way.
-
Are you trying to add this to a Sub Menu ?
As it is only designed to add to a Top Level Menu. -
I created 4 top-level menus only. The 1st is successfully linked to an block-element.
However linking block-elements to the 2nd, 3rd and 4th top-level menu does not work. -
I just created everything from the beginning – one more time. Surprise, now it works 😉 Thank you!
-
I am fairly limited on the level of support i can provide here.
As in my original reply i stated it would require custom development.If you used my updated GIST, you can inspect the HTML ( Right Click > Inspect ) of the menu item to see thge Comment which contains the hook name:
https://app.screencast.com/QU1UfkOXHjcf0
Use this method to check that you’re using the correct hook name
-
Glad to hear you got it working
- You must be logged in to reply to this topic.