Divi tutorial - Divi mega menu

so last weekend I was working on my TV University website so I have quite a few pages that I need to add in that website so when I added these pages to the menu I went and previewed the site and notice that they were two lines that were added because the menu was too short to have all those pages so I was stressing thinking right what plug-in am I going to use to resolve this because obviously it didn't look really nice so it just don't of me that actually there's a very easy way to create a mega menu using Divi so in today's video I'll be showing you how I managed to create this mega menu and trust me it's very very easy so that's what this tutorial is about ok so as you can see every time I add a new page it's forming this line right here at the bottom and it's quite confusing and it doesn't really look pleasing to the eye so what we're going to do is we're going to create a mega menu and I'll show you step by step how to do it so let's dive in and let me show you how to do that so first of all make sure that you're logged in to your WordPress admin dashboard so as you can see right here I am logged in so the first thing I'm going to do is to come here to appearance and then click on menus so what you want to do here the menus is to create a brand new menu so what you want to do here is to create to click on here on this link which says create a new menu so I'm going to click on that once so let's call this my mega menu like that and then I'm going to click on create menu ok so now that we have this menu what we need to do is to add all the items onto this menu so you can start off by adding pages that you already have on your website or you can start adding brand new ones so here I can go ahead and click on custom links so this is where I'll add say my own links that I need to add on the menu which I don't necessarily have as pages so here I'm just going to give this a blank link for now so I want to call this link resources and then I'm going to click on add to menu so now you can see we have a custom menu and then what I'm also going to do is I'm going to come here to pages and then I'm going to add the pages that we already have so I've got Divi sharp off register I would log in contact a blog okay so I'm going to click on add to menu now the mega menu actually works if you have quite a lot of pages as I've shown you in the last example so if you have a few pages I mean that shouldn't be a problem for you so now that you can see that we have all these pages here the next thing you need to do is to start arranging them in the order that you want so here I put very few links but what I'm going to do is I'm going to switch over and show you a mega menu that I created before because this is going to take me a lot of time while you're watching just to me to see me repeat this stage over and over again okay so I'm going to come over here and I'm going to click on make a menu and I'm going to click on select actually it's mega so I'm going to click on select so we can see here this is where I've added all the pages that I need to show on my website now here's the very very important thing in fact before I can explain let me just show you how this works so before these pages are all just like all in a straight line like this so what you want to do is to choose the page which needs to specify the category so the category is that I have here our blog member courses and about us so how to move these just to make them show as sub menus you can just click and just drag to the right like that but make sure you don't go too far because you want to make sure that this there right under that section okay so I'm just going to do the final one here so it should drag it too far like that all you need to do this is to you know drag it back back in place like that so now we can see that the start here I mean in fact you can name this anything I mean you can always go in there and you can actually call its menu if you want so I think menu works much better so I'm just going to type in menu in caps like that and then I'm just going to close it okay so now the next thing to you want to do is to make sure that everything all these pages go under the menu so I'm just going to drag this to the right like that so now you can see menu I mean about us and all these pages below it are now under menu and now you need to do the same for all the other sections I hope you can follow this because if you don't get this right the make up menu won't work so here I'll just go through it one more time so the mega menu is the I mean so this menu is the main thing and then everything else goes under that and then here I've actually laid out my sections so our part us has the three pages blog has these pages member and courses okay so now that we have that in place what we need to do next is to just quickly save because it's important that we save this okay so now that it's saved we need to go to manage locations and make this mega the main menu okay so here as the primary menu sorry so here the primary menu is set to main menu so we need to make sure that it's set to mega which is the one that I've just made some changes to so your menu may have a different name it doesn't really matter so I'm going to go ahead and click on Save Changes so this should now show as my primary menu so what I'm going to do next is I'm going to come here to my website refresh this and hopefully all this should go and it is so now we can see we have menu now the problem is the menu is actually working but it's not showing as a mega menu because ideally we want this whole menu to come right below here okay so to do that it's quite it's quite straightforward or we have to do is to add some CSS so let's go back to edit menus we going to come here to custom custom link so we can see here we don't have we don't have the CSS option so what we'll do is to come here to screen options and then we can click on CSS classes okay that's very important and then I'm just going to close that okay so now that we have CSS classes in place I'm going to come over here to the menu and then now we can see we have the CSS classes so now you can just type in mega menu like that let's close this and let's go ahead and save okay so now let's go back to us front end of the site and let's refresh this so now if I test this this should work and yes it's working so you can see now that as soon as I mouse over the menu we have these four areas the about us the blog the member and the courses so that's pretty cool so that's how you create a mega menu so you can also go ahead and do some changes here in the theme options so let me show you quickly how to do that okay so let's go to Divi theme customizer right so if we come here to header and navigation this is where you can do all your changes now so if you want to change the colors of these links you can go ahead and do that it's quite straightforward so I'm going to click on primary menu bar and we can see here the drop-down menu we can actually change that color let's make it slightly lighter and you can see now the color changes straightaway okay that's pretty cool so there's a lot you can do here to customize this but the best thing to do here is to just make sure that whatever customizations you're doing matches with your website branding so if you prefer to have a transparent a transparent mega menu you can always go ahead and make the changes here so if I drag this here you're getting more transparency so if I do that you can see now that that image is showing in the background but in this case this is not what I know this is not what I want to do okay so I'm just going to make a few more tweaks here and I'll just leave this alone okay so this is how pretty much we create a mega menu so I'm going to go ahead now and click on save and publish okay so that's done so the main trick here is just to make sure that everything goes under this main item that you choose to be the menu then and then once you have that in place this is what makes the mega menu work so there you have it this is how you create a mega menu using Divi it's pretty straightforward so if you liked this video please give me a thumbs up and also do share this video it helps spread the word and also do you go on Givi university comm this is where we I'll be hosting most of my shows and

Channel: SiteKrafter

Views: 66,053

Keywords: Divi mega menu, Divi tutorial, divi theme tutorial, elegant themes, Divi theme tutorial, divi builder tutorial, Divi tutorial - Divi mega menu, divi 3.0 tutorial, divi 3.0, divi child themes, divi theme, divi tutorial

Id: sTJahrP0a4k

Length: 10min 2sec (602 seconds)

Published: Fri Apr 07 2017