Build a Custom Mega Menu with Astra (and Spectra) Site Builder

[@LaRosaMJohnson]

Finally got around to watching this. Great tutorial and one that I will keep in my toolbox. Thanks, Doug!

[@emouveurs]

Great tutorial, thanks ! What I love is that you not only explain how to do something but the logic behind why you do it. 👍

[@DarrinRich]

Good video. I just started using Spectra with the Spectra one theme. I was thinking about how I would create a mega menu. Still trying to get the hang of the block editor. This helped

[@MartinKoss]

Thanks for this. I really appreciate your calm, clearly spoken presentation style.

[@beatastec-stanczyk6212]

The mega menu working great - happy to have found this video! Thank you Convology!

[@Convology]

Glad it helped!

[@tititoloco]

Exactly what I needed, explained as I needed. thanks

[@misterl9850]

Thank you! Love your tutorials!

[@Anon-dw3jn]

Hi there, thank you very much for the help you provide with your videos. Do you know how I can put the hover background color behind the elements (icon, title, description) of the container when it appears? 15:58

[@Convology]

I go over this in the video exactly where you timestamped.

[@Anon-dw3jn]

@@Convology I'm confused. Isn't it on top of the elements and you just reduced its opacity so the elements are visible? In my case, I have an icon that is predominantly white. I want these parts to stay white when the hover effect occurs, as a small visual effect, so I don't want the background to be on top but behind it.

[@Convology]

@@Anon-dw3jn You can put the CSS class on anything, so you could put it on a container in the background underneath the info box and set the z-index on the info box higher.

[@IsaacTannerDempsey]

This tut was helpful, what'd you do for the mobile menu assuming this hook would be swapped out for a standard menu on the mobile site...

[@IsaacTannerDempsey]

Hi can you explain the canvas menu, toggle menu I've created this menu and it looks great. Issue I'm noticing is that on the mobile view there's no menu opening

[@tamasbarad8202]

Hi Doug, I'm looking for a way out of Thrive (as many do). I came across Kadence (Theme & blocks). Do you have any xp with it? Any gripes over Spectra/Astra, that you chose? For the first glance review I found it a bit more intuitive and rich.

[@Convology]

@@tamasbarad8202 It’s comparable to Astra/spectra. I don’t have any complaints.

[@prathibhakae]

Hello.. I have my blog website developed using astra pro theme. Recently i happened to find a feature "sticky containers " for table of contents and social media icons on astra blog pages and I wish to add similar containers to my existing web pages. May I know how to add them to the currently live blog pages?

[@KennyBerwager]

Great tutorial, thank you. However, the Mega Menu won't be dynamic then. Meaning when menu items change pages are added via the Appearance > Menus then you have to manually update the mega menu. How do we make it dynamic?

[@Convology]

The mega menu dropdown section swhich are fully customized aren't dynamic and can't be dynamic. The rest of the navigation that the custom-designed mega menu inserts are part of is dynamic, though.

[@KennyBerwager]

@@Convology Actually, on second thought, if I created an options page using ACF. Then created the fields for title, link, description. Then using Astra Pro, customized the mega menu to show the fields using the loop builder element. This way the client can easily edit their menu items in the mega menu. Does this sound like it could work?

[@LeeGraham1]

I understand how you was able to get the Mega Menu create in Astra, but Spectra does not have the legacy WP menu system and you tutorial have not addresses how to create mega menu in Spectra. In can create the menu layout in Spectra alright, but I am pulling my hair out trying to figure how to hook the layout in the Gutenberg menu system Can you please clarify??

[@Convology]

@@LeeGraham1 the tutorial uses spectra builder blocks to create the mega menu, and Astra site builder to facilitate it. It does not use the Gutenberg menu system because it bypasses it. The tutorial shows the process from start to finish and must be done this way. Using another method does not apply to this tutorial.

[@LeeGraham1]

@@Convology ahh!, so you are using both Astra and Spectra, now I understand.

[@realmranshuman]

You can use modal popup to create a mega menu​@@LeeGraham1

[@gerardforde99]

Thanks, great video.

[@ClaudiuOvidiuStoica]

Why is not possible to center the icon with the text center (vertical)? I mean you added 3px padding top

[@Convology]

Text formatting is dependent on the line height and spacing in typography settings. Sometimes an offset is required.

[@ClaudiuOvidiuStoica]

@@Convology thank you

[@jacobharris2373]

Great video! I sunscribed and commenting for the algo thanks!!