-
—
UPDATE: 14-06-2023, you can find the latest Version here: https://gist.github.com/SchneiderSam/8549b6bf0a5c90222f3e9804bdfc3d79
—
Original Post was:
Dear Generateblocks Support Team,
I am currently trying to create a Mega Menu using Generateblocks, as opposed to the method suggested in this guide: https://docs.generatepress.com/article/building-simple-mega-menu/. I’m interested in using Generateblocks due to its versatile and intuitive features. However, I’ve encountered a problem for which I need your assistance.
So far, I have followed these steps:
1. Created my menu structure using the standard WordPress menu, alongside standard dropdown menus.
2. Added a new custom link with the CSS class of “mega-menu”.
3. Nested another custom link inside the first menu item.
4. Labelled the menu item with the format: ##, followed by the custom hook name, followed by ##. In this case, it’s ##mega_menu_leistungen##.Next, I built the mega menu using GeneratePress Elements and created a new block with the following settings:
– Element type: Hook
– Hook name: Custom Hook
– Custom hook name: mega_menu_leistungen (The hook name set earlier, without the ##)My location display rules are set to the entire site.
Now, it seems I need some additional CSS and Javascript to display the hook properly. Could you please guide me on what specific steps I need to undertake in order for the hook to be displayed as intended?
I appreciate your time and look forward to your response to resolve this issue.
Best regards,
Samuel
-
Hi there,
what do you need specifically? As i cannot see the mega menu – i only see:
##mega_menu_leistungen## -
My question is: How can I implement a Mega Menu with GB and GP? 🙂
-
It would require custom development.
The most i can offer is one my own personal GISTs – see here:https://gist.github.com/diggeddy/d536a711522f37fd54e6118a18d80f26
It will add a sub menu with a custom hook inside to any parent menu with a specific class.
You can then add a Block element to that hook. -
—
UPDATE: You can find the latest Version here: https://gist.github.com/SchneiderSam/8549b6bf0a5c90222f3e9804bdfc3d79
—
The original Post was:
AMAZING!
For the rest of the world: Thanks to the brilliant support from David (please check his Link), I was able to pull this off and I’d love to share the play-by-play of what I did. I’m sure there are many others out there who’d appreciate a step-by-step walkthrough on this. So, here we go:
1. Adding the PHP Function:
First things first, you’ll need to sneak that PHP code into the functions.php file of your theme (or child theme).
Kick things off by logging into your WordPress admin area. Head over to the “Appearance” -> “Theme Editor”. On the right side, you’ll spot the functions.php file of your active theme. Scroll down to the end of the file and paste in the PHP code we’ve got. Hit “Update File” and boom, you’ve saved the changes!
Just a heads-up, tinkering with the functions.php file could potentially throw your website a curveball. Always smart to backup your website before making changes. And ideally, these changes should be made in a child theme to dodge them being overwritten when the theme gets updated.
2. Adding the CSS:
The CSS can be tucked in the Customizer under “Additional CSS”.
Navigate to “Appearance” -> “Customizer”. Pick “Additional CSS” from the Customizer menu. Paste the CSS code we have into the text box and then click “Publish”. Voila! Changes saved.
3. Adding a New Top-Level Menu Item:
You can add a new top-level menu item using the WordPress menu management.
Go to “Appearance” -> “Menus”. Select the menu you want to work your magic on, or create a new one. Click “Add Item” to bring a new menu item into play. Give the menu item a label and add it to the menu. Click on the menu item to display its options, and add “gp_mega_item” and “menu-item-has-children” to the “CSS Classes” field. Click “Save Menu” to lock in your changes.
Now, you should have a top-level menu item with a customized sub-menu that uses the generated hook name and applies the specified CSS.
4. Creating a Block Hook:
The next step in our journey to create a mega menu is setting up a Block Hook.
First off, create a new Block Hook. In the Hook Name field, type in the relevant hook name we generated earlier. Once that’s done, it’s time to put your designing hat on and let your creativity flow with GenerateBlocks.
And there you have it! You’ve successfully crafted your very own Mega Menu. Go ahead, take a moment to marvel at your creation. Pretty cool, right? THANKS DAVID!
-
Glad to hear that worked!
-
This feels like a calling 😄, as I needed this exact feature today. Great work David 👍.
-
Awesome – glad to hear that was of use!
-
Thank you, David, this is super! And special thanks to Samuel for sharing your progress!
I got it to work, exactly what I wished.What I can’t get to work properly is to adapt the width and position of the submenu item.
Right now, it’s the width of inside_navigation.What I would like is to go with inside_header, so the width of the header and starting left aligned with the inside_header element.
(Another usecase might be to have it absolutely position at 0 and with a width of 100vw
OR to have the left-position aligned with the particular menu item (gp_mega_item_my-menu) like Envolutions does).I gave it some tries but can’t do that so it dynamically adapts to the elements – all I could do is manually edit the width and the left-position in pixels… (:
If you’d have some hints, that would be awesome!
Thanks so much! -
I created a support account to specifically thank David and Samuel. 🙂 I’ve been wrapping my head around this for a few days now and this solution finally helped.
If I could make a slight recommendation, the fix would fit nicely in the official gp/gb documentation. While it’s obviously not for everyone and shouldn’t be in core, there are other threads around asking for the exact same solution.
Troubleshooting & misc (future proofing & in case this doesn’t work)
1. Do try to add the custom php code via a child theme or in a plugin like code snippets. Adding the function like Samuel mentioned above can work too but it’s definitely not best practice and it will get removed on update.
2. If you follow the steps and it’s not working, make sure you don’t have any server side options that disable php editing in the back end of wordpress ie. forbid execution of PHP scripts.
3. Editing the css should (didn’t tinker yet so correct me if I’m wrong) fix and styling issue like the ones BenOO mentioned above.Cheers!
-
Hi alin.teodosiu and Ben00,
amazing Feedback.
Let’s check if Tom and the team are already working on a comprehensive description (covering all these points) for the documentation. We can assist them in writing it. There might be individuals with lingering questions on this topic. The proposed location for the description is here: https://docs.generatepress.com/collection/developers/
As a community, we can collaborate to draft a text that can be incorporated into the documentation.
-
Committing something like this to our documentation would potentially lead to a lot of support requests asking how to do this or do that.
So for the time being guys, this can remain in the GIST(s), and ill keep this topic open if others want to reply.Glad to see it has been of use to you all.
-
Hi All,
Thanks for this – I’ve applied this approach to a site I’m working on and it’s working well.
I’ve just got one tiny issue – HTML validation is complaining that we’re using tags other than li or script in a ul.
Does anyone have any suggestions on tweaking the approach?
Thanks
Laura -
Options:
1. Hook in your LI item using the before / after hooks in the function:
add_action('gp_before_mega_item', function(){ echo '<li>'; }); add_action('gp_after_mega_item', function(){ echo '</li>'; });2. Edit the HTML in the function to include the li… edit.
I added them to my GIST here:https://gist.github.com/diggeddy/d536a711522f37fd54e6118a18d80f26
Its easier to tell people to remove them if they want to as opposed to add them 🙂
-
Hi All –
I got it going in a sandbox – and absolutely love it!!! Thanks to all for this post – definitely appreciate it.
-
Glad to hear that David
- You must be logged in to reply to this topic.