How To Create A Divi Mega Menu (Without Plugins)

hey everyone it's Nelson Miller here with PA creative today I'm really excited to show you how to create a mega menu in Divi so we're not gonna need any plugins this comes by default with Divi and it's kind of a secret so I'm gonna show you how to really um activate that in your WordPress navigation menu and we're gonna show you how to style it you know how to you know style with top-level links there in the sub menu and add columns and all the items underneath there how style is things so be sure to watch all the way to the end because we're gonna be working through a demo alright let's get started so I guess to start one of the first things we should talk about is like what a mega menu is and it's kind of just how it sounds it's like an expanded menu and you're gonna want to use this if you have a lot of options and you might have like nested sub pages or things like that on your site and another way I like to think of it is as in fact based on the structure - of the code it's like think of it as multiple sub menus that we can kind of stack side-by-side and things like that so I don't know if you've noticed this on our web site but PA creative comm we have a mega menu under our website services so you can kind of see what you know maybe just a quick here example what the what a mega menu is and you can see how I have you know design solutions conversion strategy and our hosting plans things like that as like options under the mega menu but then under those there's more options so it almost in a way you know you could kind of look at that oh there's like four sub menus under one item here and then notice how I've styled the top one differently than the other ones we're gonna talk about that so that's kind of what a mega menu is and what it's used for I think right now there's like four third-party plugins in the Divi community and you know I'm not saying not to get them but I'm just trying to tell you you know you can do this with Divi it's built in so let's get started and we're gonna actually be building through the one I did in all over on the blog post you can find that link down below if you're watching this on YouTube so let's get started I'm gonna go over to my example website and we're gonna actually just start creating a new menu and we're gonna just call this mega manual so create a navigation menu here and then what we're gonna do is show you how to apply that in the menu module on our example page so I'm actually gonna just start adding custom links now you're gonna want to put in your actual menu item so this is divorce I'm just doing a demo so you could put in all kinds of things if you have a WooCommerce shop you could put in products you could put in your your blog posts and some blog categories whatever you want to do for me I'm just gonna go through here quick and add some stuff and then you know we'll see how that looks in a normal environment so I'm just gonna make one and call it mega menu and that's gonna be like the the top the top menu item member here in on my site here so like this item here there's a bunch of different menu items here and these like this here has a regular drop-down menu right and this one has a mega menu so I'm calling it mega menu thinking like this one and then let's just make a couple other ones add a couple items to your menu I'm gonna I'm gonna just say you know simple stuff here but that's because I'm making examples so then once you have a couple start adding some sub menu items so I'm gonna just I'm actually I'm not sure why when I'm using like the term column so I'm just gonna say column 134 here and then that's put them you know underneath mega menu so the reason I use column you'll find out in just a minute so let's save our menu write that something like that and of course don't follow me exactly but make it your own and things that but let's get something similar to that where we have like a sub menu and then I'm gonna show you what happens when we put this in the front end all right so I have a menu module here on my page and I've selected mega menu as my navigation menu so that's great I just want to see how this looks when you know I've just sort of started setting up my mega menu in fact it's not a mega menu again at all it's just a regular menu let's just I want to review that with you roll really quick okay so you can see how it works this is very standard and now you're wondering why did I say column one two three four that's because I want to put these in columns so now we're gonna go back and add our secret trick so let's go back into where our menu is now we need to do something if it's not already done up here in the top right corner of like your WordPress dashboard anywhere in your admin area there's this thing called screen options so this is a brilliant tool here this is so helpful like you could you can check like projects products do you see what just happened products and projects got added there maybe yeah like project tags product categories see these become options that we can add to our menu we're not really looking for that here's even WooCommerce endpoints like meaning orders downloads or things in your account anyway so you can do all that but what we want here is actually CSS classes so let's make sure yeah I'll just show you there's nothing here except the URL and the navigation label but as soon as I put on CSS classes it adds that right here it adds it to all the menu items okay but what I want to point out is we need to add a class here that's gonna activate the Divi mega menu and again this comes with Divi by default this is not an extra plug-in or code or anything this is the default mega menu and we're just turning it on so the one I have made which is the the parent menu item here let's go into that one and just type in mega menu kind of simple easy to remember mega - menu alright and let's save that now you remember how our sub menu look let's take a look now that when we save it okay there you go there's the columns alright so we've just by adding that class to this top menu item here where we we called it mega menu that created all these into columns okay so now let's get back and start building out our mega menu from the navigation area and again I'm going to be adding some custom links you can throw in whatever you want here so I've added a lot but after all this is a mega menu so I want to point out I'm putting submenu items under under here under the columns so it may be a little confusing at first you may think well shouldn't they be you know like underneath like just like this but see that doesn't really make sense because they end up all being on the same level so just need to indent them another time so you actually have you know your mega menu which is in the in the top navigation and then this these will line up the same but in order to to get this mega menu working correctly you do have to have the one on top and then the other is indented for these to work as a unit they and it I know that can be confusing but once you see it you'll understand so go ahead and add all of the menu items that you want and you know you don't have to add them all we can keep going here and then I'm gonna show you here on the front end how it looks with this structure okay there we have it all set up let's go ahead and save and go take a look okay so there you can see that it put those items under the column now the top one here you can see has a little bit of a line I know it's hard to see and some of these do behave differently the the ones I have labeled submenu items they actually have that background hover you know the thing that I you know really really love sarcasm but the the top one has like this little line underneath it and it doesn't have that hover effect so think of these as like this is a submenu this is a submenu this is a submenu this is a submenu so I'm gonna keep probably saying this later but I have a tutorial on the submenu and it's so related it's just that mega menu class changes it and makes it a little different so now we need to style and customize this thing because right now it's kind of boring so you can do some of this by just going into your module now if you're using the default header you know you're gonna need to use all CSS but if you are using the module let's take a look at some of the settings so the settings for the mega menu the drop-down mega menu are gonna be the same ones as in here for just this drop down menu so that's you know let's say we wanted to make the drop-down menu background color this green there you go so you can you can do a couple things in here and the line color so we could change that text color then we might make it white so it stands out something like that yeah that's it that's that's really all we have like at the time of this recording that's all we have so let's go back to our tutorial and start looking at some of the CSS that we can do and it's gonna be very very similar to our last tutorial on this on the sub menu so you're gonna want to definitely definitely check out that tutorial because in fact at the end you're gonna see why but right now we need to go in here and I have a snippet here and it's targeting this the overall sub menu so let's copy that and we're gonna be using that and just show you a couple of examples we're gonna walk through them and this type of tutorial was what people were telling me they really liked where I'm actually showing you how to do this rather than just say here paste this in and you get this style so hopefully you guys do like this so there's a couple things we can do with this overall sub menu um you know let's add a border so we would copy any of these options here that I have and here where it says your CSS here paste in that snippet so actually right now that's not going to show up because we just put in here and did this drop down thing so let's actually go in here and just reset a couple of these things and then have to worry about it there we go so now we've added a border okay we added that green border around our submenu and I'm sorry in here in the page settings is where I'm working and the Advanced tab custom CSS see that I've added the snippet and the main snippet from the tutorial and then we're we're just adding different things so like here's one border radius let's grab that and put in here and we can keep our border if we want so we can just start stacking things in this snippet so you see that I have a nice rounded border okay you might want to do that and of course change these numbers to whatever and your collars things like that okay so that's some stuff you can do to the overall now you may have remembered from my website here PA creative that we did the top one differently and and that's that's cool that's part of the submenu I mean I'm sorry that's part of the mega menu I think that's one of the features that makes it stand out where you can kind of put like headings there so let's get back again to the blog post and grab another snippet okay so the first row we're customizing the first row so this snippet here is targeting the mega menu with the list items in it but it's only targeting that there's top list items in some menu so Wow let's copy that and that's going here and we can just add that on top of where we had our other CSS all right I mean below you know something like that so again we need to put our own CSS in here this what we have here is just acting as a way to target these items so where it says column 1 column 2 column 3 that's what we're gonna target with this snippet so let's go back here and look for one of our ideas oh so here's one a border on the bottom that's 2 pixels thick that's solid and it's try that one put that in there and then we can kind of see see how that looks I have a border on the bottom of these top ones let's see what else is here's we might say oh you know we want the background of these to be a different color and you know I'm just giving you examples and of course if we do that well then we've got to do the color because you know you got to make it stand out see that that's kind of nice and we were like well if these are headings maybe we want these to be really big compared to the rest see how it's bigger now and then we might want to be bold really stand out as headings so these are just ideas of things you can do to this top row now you can notice on hover there's that background problem so I've got to add that to the tutorial here just to make sure note that use the hover so back on the blog there's a couple of other things one of these is the Divi submenu a tutorial in that well this this menu this this tutorial kind of ends here because we've we've created our mega menu and we've learned to style it remember that I said that these these dropdowns here are like sub menus and I really mean that so you can actually use our sub menu tutorial from here on out to style these list items how they look on hover how the padding is maybe you want there to be a border on the bottom of these or a background color or when you when you hover the background color changes and the color changes or you know what I'm saying any of this stuff think of them as sub menus each one of these so so far this tutorial showed you how to style the overall how to set it up how to style the top so that's really all I have for you now so just go ahead and check out the other one and that's gonna help you style any of these other items and I've set it up this other one I've set up the same way where like you know these list items on hover and then the links on regular and hover and I provided examples of things that you're probably gonna want to do to style them the other one is adding images and we'd want to do this for a couple reasons now I just got done recently with the tutorial and adding images to the menu so that's let's just go take a look at that tutorial it works separately you can do this to any of your sub menus but with a mega menu it can be really helpful let's say you have the heading here you know how we've had it column 1 but you might want a nice big image above there just to say like what this column is about and that's where you'd want to just get back to this tutorial it shows you how to just you know you copy this code here that we have for you and then you kind of do a similar thing you go find your image and paste it in between where it says insert image URL here so that I have another tutorial and video on that you can kind of see how it looks with an image in there so you can definitely do that to your mega menus as well ok so that's how you make a Divi mega menu without plugins if you guys like that if you like the process I was told that people like how instead of just throwing a code snippet at you and copying and pasting it kind of showed you those little you know the snippets that you could use to do different things if you like that be sure to give me a thumbs up that way I'll know that you like that style tutorial and I have a bunch of plan let me know what you'd want to see next and we'll see you guys in the next video you

Channel: Pee-Aye Creative

Views: 36,100

Keywords: Divi mega menu, Divi mega menu without plugins, how to create a divi mega menu, how to style the divi mega menu, how to customize the Divi mega menu, Divi menu, Divi submenu, Divi mega menu tutorial, Divi mega menu how to, Divi Theme Builder, Divi 4.0, Divi 4, Divi, Divi Builder, Divi Theme, Elegant Themes, WordPress, Divi hack, Divi tutorial, Divi CSS, Divi Website, Divi feature, Divi update, Divi how to

Id: WiZMjLG04jo

Length: 18min 24sec (1104 seconds)

Published: Tue Mar 03 2020