In this video, I want to talk about mega menus, okay? And then specifically, I’m going to show you how to build them using Kadence, okay? Which is Kadence is the theme that I use almost all the time. Other platforms can do mega menus as well. So we’re going to go and talk about the general use of mega menus, and then I want to also show you how to build them with Kadence. So first of all, what we’re looking at here is davidrisley. Com. It’s basically my website. However, this is not a site that I use all that much. It used to be my main domain. Now it’s just a placeholder, okay? But the reason I’m coming here is to show you this little drop-down menu which says Projects at the top. And this is your very standard drop-down menu, basically default Kadence. This site is running the Kadence theme. And if you just use the standard menu organizer and don’t try style it up at all. This is basically what a drop-down menu is going to look like. Now, it works, okay? However, some sites are large enough to where it could be a little hard to get what you need to display into a menu such as this.

And so if we go over to blogmarketingacademy. Com, you’ll see that I’ve recently redone three of my menu options to use the mega menu setup, okay? And so there’s a lot more going on in here. I mean, this is way beyond a standard drop-down. And basically, I can design this thing using standard Kadence blocks and design the entire thing the way that I want, and I just trigger it with the menu option. So mega menus are very, very useful. They can make it so that you can display a lot more pieces and components of your website up in the top menu, but without making a drop-down menu that is just so incredibly difficult to use. And I want to be clear, I’m going to show you how this is done with Kadence because it’s not the most straightforward thing to do. But that being said, other platforms often have their own way of doing mega menus. And so even if your site is built in a different system, a different theme, good chance mega menus is something that you could pull off using your platform. And it might be something you want to look into as a way to put more up there in the top menu, but It still have it look good and not make your menu system just really unwieldy to use.

Now, to show you how this is put together, I’m just going to go behind the scenes with blogmarketingacademy. Com and just show you the pieces that are there because it would be It’s going to be easy to recreate. Now, I will say the actual design of the drop-down menu itself, the mega menu itself, is going to be something that you’re going to spend some time on. But the mechanics of setting it up are not that difficult. Now, first of all, I want to be clear here that you are going You’re going to definitely need the Kadence Pro set up, because you need access to two add-ons that are only in the professional version of this. You need to go over to Appearance, go to the Kadence menu, and then you need to enable the ultimate menu, and you need to enable the hooked elements. Those are two that you’re going to need in order to pull this off. Now, with those two then turned on on your platform, then what you’re going to do is go over to Elements. Now, you’re going to see I have a whole bunch of them set up on this site.

However, I believe it’s down here. Yeah, here they are. See these menu options? So I’m going to open up this services menu one, and I’ll show you what this one looks like. Let’s pop this up in a new tab. So there it is in all of its glory. Now, if you go over here and I pop down the services drop-down, there it is. There it is right here. So this is what shows up, and you can see what’s going on. It’s just dropping down this particular thing that I designed using Kadence Elements. Now, the design of this, if you pull it up in the block editor, it’s just a big row with some columns in there, and I’ve designed it using the various blocks that go along with Kadence blocks. I think these are the info boxes because they are very handy for this. I’ve got the call to action here for Concierge itself, a few submenu options, a thing for any time credits. The way that you want to design your mega menu drop-down is totally up to you. This is just the way that I’ve done it, and I may tweak it over time.

I don’t really know. So you would design it the way that you need to design it. Now, over here, the important part is that we do not need to do a placement, but you do need to make it show up on the entire site. You need to say the whole site because your menu system is on the entire site, right? But you’re not going to set it up to trigger automatically at all. We’re going to do that in the settings for our menu. So once again, just design the system the way that you want, put it up into a row, and then make it so the display settings say entire site, and then go ahead and publish the element. Now, it’s not going to be displayed anywhere yet on your site because you haven’t actually activated it. Now, if we head into the menu system for WordPress, this is all standard stuff, but what we’re looking at here is my mobile menu. And I’m only showing this to you in order to show you how menus are typically put together. If you were to have, say, the services menu, and then you have all these things filed underneath it, then by default, you’re going to get the standard drop-down menu set up, like I showed you on davidrisley.

Com just a bit ago. So now we’re going to swap over to the one that I’m actually using. Let’s go to my primary, and we’ll show you the difference. Okay, so here’s what we got We’ve got the root levels, Concierge, Services, Resources, About, and Contact. If you go over here, that’s exactly the five items that show up there. Now, under here, we’re pulling in the Concierge menu, the Service menu, and Resources menu. Now, there’s a few things we need to do. If you go to Concierge, first of all, you need to go to menu item settings. This is all Kadence stuff. You go to mega settings. Now, this is only going to show up if you have that ultimate menu set up enabled for Kadence Pro, and you’re going to enable the mega menu drop down. Now, once you’ve done that, you could choose your width. I like it to be set to the content width. You could have it go the full width of the site. You could have it go to the menu container, which would basically be just the width of these five items here. I think that’s personally too skinny, but you can see how mine actually goes to the entire content container width, and that’s because I have it set here.

This stuff It doesn’t really matter a whole heck of a lot, I don’t believe. You can put shadows on it and various things if you’d like to. You can play around with those settings. But basically, once you’ve enabled that, the other thing, and you’re probably going to have to save it, once it’s actually turned on, then you can go down here, and I’ll show you how to put this in in a minute. But you would then go to menu item settings, mega settings, enable custom content. You toggle that, and then you would select your element. You can see that I’ve selected the Concierge menu, which is literally just the name of the Kadence element that we’ve designed. I’ve got one for resources, and I’ve got one for services. That’s basically what is involved here. The way it would work is you would drag over your page into the menu, your root level. You would then open up the menu settings and you would enable… Let’s pull it up again. You would enable the mega menu. Sorry, no, that’s the wrong one. We’re going to the root here. You would enable the mega menu drop down.

Now, once that has been saved, then what you’re going to do is you can see that this right here is a custom link. And so what we would do is pull this down. Where’s custom link? It doesn’t even matter what you put in here. I just put an ampersand or a number sign there, and then I say blah. It honestly does not matter what you put there. Okay. Good. Now we’re going to drag it up here. Now see, if I don’t save it, the button does not show up. I’m going to temporarily make this look really strange because it’s going to probably show up on my website. Now, once that’s been saved, you can go down here to menu item settings, enable custom content, choose it, and there you go. Okay, now let me go ahead and quickly remove that because we don’t need that blaga showing up on my website anywhere. That would look really strange. And that’s about the gist of it. It’s not particularly complicated, but if you don’t know where these settings are, you might not even know you have the option. Kadence elements, and along with this mega menu set up that’s deep into the settings for Kadence Pro, is actually quite a powerful setup.

It’s just that a lot of people don’t realize that they can do this with Kadence. Now, again, just putting it out there is that your site may have enough parts to it, enough pages, enough things that you want to bring to the surface for people, that the use of mega menus might actually make a lot of sense, a lot more so than your standard drop-down menus where things start to get a little nasty because it gets so packed. Generally speaking, the standard setup of drop-down menus, they just get really hard to use if you put too many options in there. And I’ve seen some people really stuff them up, and especially getting multiple levels deep, and it gets to be real nasty, and so I don’t recommend it. So you might want to check out the mega menu setup. Now, one quick comment, or actually two quick comments. One is, I would test this out in staging, so I would put your site into a staging site. That way, you can goof off with it, you can mess it up, you’re not going to experiment out in the open, okay? That’s This is basically what I did while I was experimenting with this.

And it’s cool, too, because Kadence has export and import functionality built right into Kadence elements. So I literally built these mega menu set-ups in staging, got them to where they looked really nice, and then I exported them, imported them into the live site, activated them, and done. It looked great. So that’s one thing. The other thing is that, obviously, these mega menus are only going to really work on desktop. Once you start going into smaller formats with tablets and mobile screens, it’s a different setup. You’re not going to be using mega menus in those situations. And so you’ll use the Kadence setup for choosing a different menu, specifically for mobile, and you’ll have to use a standard drop-down setup for mobile screens. But once we go to desktop, you can then use mega menu setups, and it will look great, and it will… Kadence will automatically make sure that the mega menu only shows up on desktop, and it will show mobile only. It works really nicely, and it will work on all platforms. Okay, so that’s about it for this video. Hopefully that was helpful to you. If you are using Kadence theme, then this was definitely applicable to you.

Now, again, if you are using a different platform, maybe your site was built with Elementor or Bricks or some other theme out there, a lot of them these days can support doing mega menus. It’s just that the interface is going to be different. But you might want to look into using them because they definitely do have their use. I will say, too, if are a client of mine, then I can help you do this. A lot of my clients are using the Kadence theme. I don’t require that people use the Kadence theme. It’s just that if you’re going to have me redo your site, that’s probably what I’m going to be using. And so therefore, I can help you design these mega menus if you would like a little bit of help with that and speed things along, and we can get this live on your website ASAP. All right, once again, if you have any questions at all as well, you can drop a comment on this YouTube video and I will help you out. Talk soon.