How to Create Mega Menus in Divi Theme - Ultimate Guide (2 Ways - CSS & Plugin)

so in this video we'll see how you can create stunning mega menus in db and i'll show you two ways you can create mega menus in dvd the first one will be to use db's mega menu class to create mega menus and this one does not require you to purchase any plugin and yep it's free just you just have to set up your menu and then add in the class and it will it will appear like this and i'll also show you how you can install it with some css to add these kind of hover effects and make the menu make the mega menu look more better than how it looks without the css and then the second method would be to use a plugin and using the plugin that i'll show you in this video you will be able to create menus like this as you can see it looks pretty cool this is a dvd library layout that is added below this item and it appears like this and this one also with adb library layout and this is a blurb module and this one is a wordpress menu you can also add in a wordpress menu dropdown using this plugin and this plugin has so many feature and it's called tv menus and you can buy it from the link in the description from the tv marketplace or you can purchase the bundle or their family they have db menus which is their main plugin and then they have three add-ons for this one this one is a floating sharing and on media these three are add-ons to their main db menus and you can purchase the plug-in separately from the marketplace or go to their own website and purchase the family they do not offer separate plugins on their website as of now you can only purchase the bundle on the website anyways you can go to through the link in the description there will be affiliate links and you don't have to pay anything extra and i'll earn a small commission so why not let's get started with this video so now let's first see how you can create a mega menu using the dv's mega menu class and for that you will have to go to dashboard and then go to appearance menus and make sure that you have created a menu or your header using the team builder or if you're using the dv's default header you can go with that as well and then you will have to choose your menu here and now let's go to the menus and here let's select our menu and now let's say i want to add a mega menu under this blog item what i can do is i can start adding menu items here but first let's add a mega mini class to this item for that go to the top of the page click on screen options and here enable css classes and now you will see this css class option here you will have to add the class mega menu now you can start adding your mega menu items for that let's add a new one here you can have your custom url and then [Music] add your link text and let's add it to the menu and let's drop it under the blog and then let's create a new one and then let's add it to the menu again now for this one it should go under this mega menu item one and i named it 1.1 so this is our main menu item this will be the this will work like a heading as well for your mega menu items you can have your link here as well if you want to and i'll show you in a bit and now let's keep adding more items here so i added these three items here now let's move them right here like this under this mega menu item like that so make sure that these are all in the same place and then if i save it and then visit our page now if i hover over this one now this drop-down menu is very big because it's a mega menu and as you can see this is our top menu item it also works like a heading as i said before because it has this bold text here now there's some issue here as you can see it it disappears so i think it's because my header is not inside the team builder i will just increase the sections the index value something like this and if i save it again and see it here it should work fine as you can see now it doesn't disappear all right so the next issue here is that the mega menu background is transparent for that let's open up the menu module setting here go to design drop down menu here you can change the menu background color line color and the line is this one right over here let's have it white as well change the text to black active can be any color let's have red you can have whatever you want and for the mobile let's have white for background and black for text now save it and now it should be looking much better than before so as you can see now the mega menu background is wide and it can be seen very easily so now let's add in more items here for that let's go to the menus and here let's keep adding more items so i just added these five items here it's actually six now this will be the top one like this item for that we need to make sure that it aligns with this one right here the mega menu item one it should align with this one and now let's drop this one below this one like this i know this can be a little confusing here but once you get to know it it will be very easy so this one have four items and this one have five sub items here if i save it again and visit the page now as you can see we have more mega menu items here you can add in as many as you wish so i'll just add one more here [Music] all right so this is the third mega menu item or the third row in our mega menu item it will go right here so let's add it like this align it with this one right here and let's drop it below this one like this all right now let's save it again for the one last time and let's see the page and there we have our mega menu is looking very cool but it might not be looking that cool now you can use a little bit of css to customize it like we can add board radius to the drop down we can have a different kind of hover background for these menu items so for that let's right click let's right click and click on inspect and over here you can select the hover tool now i'm going to explain it very slowly here because some people might not be familiar with css alright so now we have to make sure our menu item is selected and come over here and click on hover to show the mega menu and now we can select our sub menu here like this and to style our dropdown this is the right class and here you can style it the way you like now let's add order radius 10 pixel and also let's add a box shadow that is more visible something like this [Music] and let's decrease the color transparency like that and it looks much better and we can copy this whole css from here and theme option you can go to divi theme option to paste your css and paste it right over here and because we only added border radius in box shadow we can delete these two from here and save the changes and now our mega menu looks like this it is already much better but we can have a different hover effect for these items here for that first we have to go to the the builder here and remove the drop down menu text color so we can have our custom text color for the drop down on hover state and let's save it and the reason is because we also have to fix an issue with these items here and now let's inspect and select this item and click over here again and click on this over to have the hover state of the menu item and right over here where it says hover we can make our changes now let's change the background color to let's say something black and change the opacity to 1 and change the color to white add a important and don't worry about this one because we made a change in the module setting it will be fixed when we refresh the page so you can copy this css from here go to theme option paste it below this one and save changes and if i refresh the page as you can see now we have this beautiful looking hover effect but the text color is a bit less dark now because before it was completely black for that what we can do is copy this css from here ctrl c paste it below this one and add brackets and change the color to complete black like this and actually we have to remove this one because it will change the drop down styling for for the mobile and might create some issues and let's remove that and let's save it and now let's reload the page and see how it looks as you can see now it's darker now the color text color looks much better than before and we have this beautiful looking over effect we can also add a border radius to this over background like this and you can add it below the color ball radius 5 pixel save it and if i refresh it again as you can see now we have a border radius it to the menu items but there is this issue that we need to fix let's select the hover tool show the dropdown mega menu like this and select this item from here and have the hover state and this is the right class we need to copy this class from here go to theme option paste it below this one and change the color to black and add a important like this and save the changes and now the hover issue will be gone if i refresh the page as you can see now it looks much better and we have this crazy hover effect for these items but not for this one but as you can see this is touching the edge of the mega menu what we can do is add a padding to the mega menu and for that go back to theme option and come over here where we style the mag menu and edit border radius and box shadow and add a small padding of let's say 10 pixel and now let's see how it looks so as you can see it looks much better now what we can do is remove the top and bottom padding because it's looking it's looking narrower than before and change the padding to let's say 20 pixel this one will be top and bottom padding and this one will be left and right padding save changes refresh the page [Music] okay now this looks way better than before and now it does not touch the edge of the drop down and yeah i guess that is our final result for the mega menu if you want to install it further you can always inspect the tool and style it the way you like and if you want this css you can find it in the description of this video i'll leave it there and yep this is how you can create a mega menu using the dvds mega menu class and style it a little bit so it looks cooler and that is pretty much it for this one and now let's see how you can create a mega menu which uses the db builder library layout in your drop down and you have way more styling option and that does not require any css knowledge as well all right so the second method would be to use the tv menus plugin from dawn divi and it's a really cool plugin and it allows you to create beautiful looking mega menus in divi and not just that it also provides so many other features and so many ways to showcase your content and it's just epic and in and you can come over to their marketplace product page and you can come over to their marketplace product page and here you will be able to see all the features db menus offer and if you scroll down here let me show you the mega menu thing as you can see right over here and this one you can create almost any kind of mega menu using their plugin like this one that elegant themes have on their website but it might not have this effect that goes over here anyways so you can use it to create almost any kind of mega menu and use dv builder to design your mega menu content so i have the plugin installed on my website and yep i already have created this beautiful looking mega menu as i showed you before and it is just really really epic so let's go to the dashboard and i'll show you how you can design this but if you want to download this drop down layout you can find the link to these in the description of this video because if we went to design this mega menu content as well it will take the video to around 1 hour 30 minutes or something but i want to keep it short and sweet all right so let's go to the tv and here let's go to team builder so here you can build your global header using the team builder so let's edit it and and here i will delete this one and show you how to make it from scratch this kind of layout and how to use the module to make your mega menu and also make it responsive so let's delete it and now let's add in our row here and then reduce the section padding to zero so it will look good and here we can use the module that's called db menus flex this one they also have db menus plugin which you can use to do other kind of stuff but for the mega menu feature and all that stuff we are going to use the flex module let's add it here and now you will have to go through so many options here and this plugin have so many options and you're going to love them so here let's have it show opened and under the logo we can add our logo here [Music] decrease the logo size like this content and menu button we can hide it for the desktop because we are building a mega menu here to show items always here and yep we don't need that on the desktop but if you want you can have it on desktop if you like it alright so let's hide it for the desktop and let's add in our first menu item here and give it a name links and you can add icon or image like this you can even have icon with the text as well and then choose an icon or replace it with the image something like that under the link panel this is where the magic happens you can select the link type to sub and this way you can show a mega menu and select the layout from the dvd library that will be shown at the mega menu alright so i already have the mega menus saved in the db library if you need to create them you can go back to the dashboard let me show you real quick and db library and here you can add a new give it a name and then you can select section row whatever works best for you and then you can start designing your mega menu but if you want to download these two as i mentioned before you can download them from the link in the description and then import it and then you can start editing or using them so let me select the drop down here and here we can change the width of the drop down in this case this one will have 1100 pixels for the desktop and we can also show arrow direction top under the design we can change arrow color to white and we can change the alignment to left alright so let's see how it looks because the mega menu won't show in the builder it will only show in the front end so let's refresh the page here as you can see this is how it looks and now now let's add in one more item here for the shop and yeah you can go to link link type as sub you can also have pop-up and when you click on it it will show a pop-up you can have that if you want and let's select the layout as shop for the shop drop down and we can have a bit for this one around 300 pixels and we can also show arrow for this one and under the sub make sure the arrow is white for this item and then let's go back and now we need to style these items here let's go to design and here let's open up menu items change their color to this and make it and make it transparent like this and now we can also add border or corner radius here like that we can change the phone to whatever works best for you phone bit too heavy change the link color in this case let's have this one it looks good and we need to change the item background color to be solid on hover like that and the text to be white on over okay looks great and you you also have many other styling option and you can check them out so as you can see the logo is not is not aligned with these items for that let's go to the logo and change the alignment to middle and now we need to change the distance between the logo and the items for that let's go to the spacing and here you can change the margin let's add margin of 25 pixels that looks good you can also change the spacing between menu items like this all right so let's see it and save it and see how how it looks on the front end so as you can see this is how it looks just like i showed you before and yep it's a no-brainer very easy at least no coding required and now let's add in the very last item that we added before and this one will have the wordpress menu as a drop down so you can add in your menu item give it a name under the link change to sub and here you can select the source as wordpress menu and then select your wordpress menu and you can preview it in the db builder and this is how it looks actually we have to change it with a different one because this one we used before for the mega menu using the dv let's have it company and yeah this is how it looks and as you can see these items have a border radius here let's go to the advanced custom css and and remove the border radius like this and go to the design content sorry and here you can show the arrow you can change the offset and under the design sub you can change the arrow color let's have it this one [Music] and change the menu item background to this and the text to be white so it is visible and let's add that over effect here [Music] like this and done that's how easy it is so let's see it on the front end again and this is our mega menu using the dvd library layout this one is a custom built phone using the blurb module and this one is using wordpress menu and it is very very easy and now let's make it responsive real quick and for that first uh let me hide this in the visual builder so we can work on the on the responsiveness and here you need to disable show open for tablet and under the menu button we need to we need to show it like this as you can see and now you can go to design db menu and change the change the alignment for tablet like this if you click on it it shows like this you can enable full width menu items like that and now under the content tv menu you can enable responsive and change the direction to vertical and now we need to add the logo above right over here go to design logo and absolute position enable it for tablet and then change the position or alignment to top and there we go and this is how it looks that is pretty cool if we [Music] see it on the mobile it looks like this that is crazy and we can also start this button for that under the design menu button you can add your styling option here let me add the background color and boom it's done so let's save it and let's finally see how it looks on the front end and also check the responsiveness all right so if i hover over it it looks like this pretty cool i can check the responsive as well as you can see and there's this issue let's fix this let's go back and go to the menu the contents and then the issue is with this one first one the other looks good so let's fix this go back let's open the first item and blink and here let's change the width for tablet to 100 and save it so now it should be working fine and yep this is how it looks pretty pretty cool everything is perfectly responsive yeah guys i think that is pretty much it for this video i really hope that this video helps you learn how you can create mega menus in tv now don't take this plugin the db menus plugin very lightly because it has so many options you can create items like this as you can see let me show you there must be a demo as you can see you can create stunning manuals in db and layouts like this one you can even create tabs all right that is pretty cool something like this and there are so many options you can also create pricing switcher and tabs and yup your basic db menus taken to the next level using this plugin as you can see it's popular on the marketplace anyways again i hope it was helpful let me know what you think about it in the comment section below all see you in the next video till then have a great day peace out [Music] [Music] you

Channel: SamarJ

Views: 4,203

Keywords: Divi, Divi 4.0, Divi Tutorial, SamarJ, Mega Menu, Mega Menu in Divi, How to Create Mega Menu, How to make Mega Menu, How to make mega menu in divi, Divi Mega Menu, DonDivi, DiviMenus Plugin, Mega Menu with CSS, Mega Menu with Plugin

Id: 5pyrrluUeaI

Length: 30min 59sec (1859 seconds)

Published: Mon Sep 12 2022