Build a Custom Mega Menu with Astra (and Spectra) Site Builder
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- Learn how to make a completely custom mega menu (I built the one from SureCart.com) using Astra's site builder and Spectra.
► TOOLS FROM THE VIDEO ◄
✅ Astra: www.convology.com/astra
✅ Spectra (I recommend Essential Toolkit): www.convology.com/spectra
✅ Convology Pro: www.convology.com/pro
► CSS from the Video ◄
.mm-section :hover {
background-color: #01824c10 !Important;
border-radius: 8px !Important;
}
---------------------------------------------------------------------------------------------------------
Links are affiliate links which means I will be compensated should you choose to purchase the product after clicking on my link. This costs you nothing but helps to support the channel. You also get really cool stuff that I highly recommend!
---------------------------------------------------------------------------------------------------------
![[TH] VCT Pacific Stage 2 - Playoffs Lower Bracket Final // PRX vs DRX](http://i.ytimg.com/vi/5HwO1bQyAx4/mqdefault.jpg)
Finally got around to watching this. Great tutorial and one that I will keep in my toolbox. Thanks, Doug!
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
The mega menu working great - happy to have found this video! Thank you Convology!
Glad it helped!
Thanks, great video.
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...
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
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?
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
I go over this in the video exactly where you timestamped.
@@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.
@@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.
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??
@@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.
@@Convology ahh!, so you are using both Astra and Spectra, now I understand.
Why is not possible to center the icon with the text center (vertical)? I mean you added 3px padding top
Text formatting is dependent on the line height and spacing in typography settings. Sometimes an offset is required.
@@Convology thank you