Kadence Pro Theme and Kadence Blocks Pro Tutorial: How to Create Beautiful Mega Menus in WordPress

hey what's up everyone clifton here with clifton wp and welcome back to the channel and another tutorial in this tutorial you're going to be learning how to use cadence theme pro's ultimate menu or mega menu functionality if you ever wanted to be creative with your menus maybe create a mega menu create a menu that can contain posts pages even blocks then this is the tutorial you've been waiting for so watch this tutorial from the beginning to the end so you can learn how to be creative with your menus and how to create some really nice mega menus for your websites you guys ready let's get right into it [Music] okay so let's go over what's possible with the ultimate menu mega menu capability of the cadence pro theme so typically you have your navigation menu right here in the header and traditionally if your menu has drop downs you would have a drop down like this where you have the single vertical drop down that drops down with just links to the different pages what a mega mega menu is is a much more dynamic looking menu that allows you to have more items in the drop down so here's a good example of that right here so you see right here we're able to have a grid of menu items and we're able to add more pages so instead of it dropping straight down we actually have it stretching horizontally across the entire page this was considered a mega menu one of the benefits of the cadence pro theme is that it adds these additional modules that allow you to do things like this so one of those modules is the ultimate menu and basically it allows you to build a much more dynamic much more presentable type of menu where you can add more items to the to the menu and you're not just limited to links like this you can also even add images icons additional headings and you can configure this any way that you want because we're going to be using the cadence blocks which applies the gutenberg blocks from wordpress we're actually going to be able to put anything we want into our mega menu so that allows for a lot of flexibility and a lot of creativity for instance you can have a mega menu that has a contact form directly built in so now they don't have to go to a completely separate page they can just hover over the contact link and fill out the form and send it off to you very quickly and very easily or if you wanted people to opt into something right so you could have a mega menu like this where you have a few benefits maybe you're listing four benefits of the asset that they're going to be gaining or the lead magnet and then you have your lead magnet right here to the right and then go ahead and fill out this form and subscribe to whatever it is that you are offering so what we're going to do now is we're going to start from scratch we're going to get rid of all of this and we're going to rebuild it and you will learn how to build your own mega menus using the cadence pro theme and cadence blocks pro okay so the first thing that we'll need is a fresh install of wordpress so if you're following along go ahead and install wordpress we're going to go through this step by step and i'm not going to skip any steps so the first thing we're going to do we're going to go to our dashboard go to appearance go to themes and we're going to click on add new and we're going to install cadence so do a search for cadence here's the cadence free theme here we're going to go ahead and install that and activate now that we have this activated i'm going to go ahead and delete all the additional themes that are here okay now that i've done that i'm also going to install cadence blocks so i'm going to go to plugins add new and do a search for cadence and here's the gutenberg blocks by cadence we're gonna go ahead and install this and activate and now we have cadence blocks installed now in order for you to use the ultimate menu from cadence you're going to need the cadence pro theme so the cadence actually the cadence pro theme is really an add-on is what it does is it basically enhances the cadence theme that you have so if you don't have it i recommend that you go ahead and get it you can go to the link in the description below and it will take you here where you can see all the benefits of getting the pro add-on so the pro add-on with the pro add-on you get extra header add-ons hooked elements and this is what we're going to be focusing on here which is the ultimate menu this ultimate menus was going to allow us to be able to create our mega menus and those drop downs that i showed earlier there are also some additional benefits like fixed elements and header and footer scripts and the woocommerce add-on and right here is the pricing the cadence pro add-on is 59 for a single license that will allow you to be able to use it on unlimited sites with one year of support and updates then there's the essential bundle for 129 and on this one you not only get the cadence theme pro add-on but you also get the cadence blocks pro and access to pro starter templates and then there's the full bundle for 199 that gives you access to all the plugins that cadence offers and then they also have a lifetime license so if you're thinking about getting the lifetime bundle the benefit of that is you only make one payment you get access to everything and you get access to any future products that they release for free okay so we're gonna need two more plugins in order for us to be able to build out our ultimate menu we're going to need the cadence theme pro add-on and we're going to need the cadence blocks pro and so to be able to get that once you have picked up your license you will go ahead and access your account and from your account you'll be able to download the cadence pro plugin right here and you'll be able to download the cadence blocks pro as well so once those are downloaded you're going to go back to your dashboard go to plugins click on add new and this time we're going to click on upload plugin choose and i'm going to go ahead and find it right here in my here it is the cadence pro plugin install it go ahead and activate it and then we're going to go ahead and click on add new again upload this time we're going to install the cadence blocks pro install and activate again if you need the pro versions of these plugins which you'll need to be able to pull this off the links are in the description below you can go ahead and pick up a copy for yourself there all right great so now that we have all this installed we now need to go ahead and activate it so i'm going to go ahead and active activate these plugins right now so you're going to click on the activation section here for the cadence pro theme and i'm going to go ahead and put in my license key and then i'm going to go ahead and do the same thing for the cadence blocks pro okay now everything is activated now we need to do one more thing we need to install the cadence starter templates that you can do from going to the plugins and add new and doing a search for kitty and starter templates or you can install it right here from the link that pops up from the moment you install the cadence free theme so i'm gonna go ahead and click on install kit installer templates i'm going to select gutenberg and now we have access to all the pro and free templates that cadence has to offer and from here we're just going to go ahead and select one the one we're going to use in this tutorial is the recipe blog template so i'm going to select that i already like the colors the way that it is so i'm going to go ahead and click on full site and start importing okay so now that that's important let's take a look at our site excellent the website looks good and we already have a menu going right here right so as you notice there are no mega menus installed at the moment so i'm going to go back to the dashboard i'm going to go to appearance and right here where it says cadence i'm going to go ahead and click on that and over here you can see all the pro add-ons that are now available to me so we now have header add-ons conditional headers ultimate menu this is the one that we want so i'm going to turn this on and then i'm also going to go ahead and turn on hooked elements header add-ons and the rest of it we can play around with a little bit later but this is all that we need for right now to be able to pull off the ultimate menu mega menu so now we are all ready to go ahead and get started creating our mega menu for this website to create a mega menu you will need to go to the dashboard go to appearance and menus now there are two types of mega menus you can create so you can create a regular menu that has actual pages or custom links or posts and categories as your menu you can also create a menu where you have custom blocks or sections that you've created as part of the menu so what i'm going to demonstrate first is just how to create a regular mega menu and we're going to do that using this existing menu that is here right now so the first thing we're going to do is let's just create a menu and we'll call this menu let's call this menu easy recipes so i'm going to go ahead and just create a custom link we're gonna use a hashtag to nullify the url and then i'm just gonna call this easy recipes okay and we're gonna add this to the menu then we're going to create four additional custom links okay and we'll call this one whoops we'll break this down into easy breakfast easy lunch easy dinner and easy dessert okay so now we have we've added these additional links to the regular menu now we need to turn this into a mega menu so to do that easy recipes are going to be is going to be our parent link so this is going to be the link that you hover over to create the mega menu and then the rest of these will be under the menu so all we're going to do here is we're going to shift this over like so and then there is one thing that you do need to do so if we open this up you'll notice that this looks like a regular menu right now what we want to do is we want to just go ahead and save the menu so now that i've saved the menu if you go back to the menus now you'll notice that there is an additional option here called menu item settings it wasn't there before so you have to save the menu first in order for this to show up so if you're following along and you notice that you're not seeing the menu item settings just go ahead and save the menu and then check again and then you'll see this item here okay so if we were to go look at our website right now you will see that the website of the easy repeat recipes is there and then we have this drop down okay so it's just a regular drop down like normal so now we're going to go back to our menus and from here we're going to start configuring the mega menu so you're going to configure the parent menu first so we're going to open this up click on menu item settings and now we have these settings for us to configure our mega menu now if this were a page or an or an existing page an existing link you go ahead and disable that link you can hide the text label and you can add a menu item icon okay we're not going to do any of that right now all we're going to do is disable the link for now okay then the next thing we're going to do is we're going to go to the mega settings and we're going to enable mega menu drop down and then from here you have some options you have an option for the mega menu with where it could be the content of the menu item itself the menu container with full width and a custom width okay in this case we're just going to do let's go ahead and do four mega menu columns so we'll leave it at content we'll say we want our mega menu columns to be four columns and then this is your mega menu column layout for those four columns and we'll just keep it even then here you can set up a background color for this so let's go ahead and set up a background color here of just a light background and then you can add padding we'll leave that alone and then you have the link colors so i'm just going to set these to dark colors so that we can see the menu so the color will be our strong text dark color here and then the hover color will be a little bit lighter and the active color will be a little bit lighter as well we're going to leave the links background alone and then the links item divider we're going to leave that alone as well and the link padding we'll leave that alone okay so i'm going to go ahead and save this and now that it's saved you can just close out of this for now and let's just look at what we have so far so i'm gonna go ahead and save the menu and let's open up the website in a separate tab all right so here's our our website and if we hover over the easy recipes you'll notice that we have the beginnings of a mega menu now we only have four links so it's not showing very much but you kind of get the idea of what happens right so if we go back you'll notice that what happens here is because we selected four columns each menu item will represent a column now you can take this further and you can make each item a header for each column so if i go back here you'll notice that if i hover over easy recipes i've got easy breakfast easy lunch easy dinner and easy dessert i can then create additional links that go under these as additional columns or i could create additional links that simply go under these as part of the link structure okay so let me show you what i mean so i'm going to go over here and let's say i want these to be headers for the types of food or food recipes that are available so under easy breakfast we're going to add three additional links so i'm going to come here i'm going to say i want to add ham and eggs we're going to drag that and we're going to shift it under the easy breakfast now i'm going to add omelettes let's put that under here and then now i'm going to also add oatmeal say oatmeal and cereals okay i want to save the menu and then when we look at the site let's refresh the page and we hover over you can now see that under easy breakfast we now have ham and eggs omelets and oatmeal so if we were to continue this we could have multiple items go underneath each link each link so let's go ahead and do that so that we can have a full look at the mega menu that we have created so i'm just going to add three more links under each one of these sub items [Music] okay so now i've created all the additional link items uh under each mega menu heading i'm going to go ahead and save the menu all right now when we go back to the website i'm going to refresh the page and now when we hover under the easy recipes you'll now notice that we now have a full mega menu in place where now all these links can link to different parts of the page so this is what you call a traditional mega menu where it is just the links to different pages or different areas underneath the main menu item in the main navigation okay so now this looks great however you can actually do a lot more and a lot better styled mega menus with the ultimate menu items with the ultimate menu feature in kd stain pro and that's what i'm going to show you how to do next so if we go back to our example that we looked at from before you'll notice that these mega menus look uh dramatically more styled and much more presentable than the one that we've created so far so what we've done so far this is just the default sort of basic we'll call this the basic mega menu what i've done here is a much more stylized mega menu that includes multiple elements and this is very possible to do with the ultimate menu add-on that kid and steam has so i'm going to show you right now how we're able to create these kinds of menus versus just this kind of menu so let's go ahead and get right into it so if you go back to the dashboard and if we take a look at menus for instance you'll notice that really the only options that we have here are links so we have custom links or you can add pages and turn those into mega menus and so on and if you open up any of the mega menus that we have here and go to menu item settings you'll notice that there isn't very much styling options and there actually isn't any option here to be able to add any kind of custom content or custom blocks or anything like that well the way you do that the way you accomplish something for instance like this is you would actually have to create an element and that is a feature that comes with cadence theme pro where you get to be able to create elements or sections that hook into anywhere on the website and so it just so happens that the ultimate menu is one of the areas where you can hook in some of these well designed mega menus so what does that mean well essentially what that means is you can create anything out of a page or a block or a section and add it to your mega menu and i'm going to show you how to do that right now so if we go over to the dashboard here and we go to appearance then cadence you'll see right here we have this elements feature this hooked elements feature is what's going to allow us to be able to do this so i'm going to click on elements and we currently don't have any so i'm going to click on add new and when we get to the element setup you'll see that it gives us an option of default fix or html editor default just means the default element creator it looks exactly like creating a page or post this is the default way of creating an element fixed means you're going to be creating an element that's going to be affixed somewhere on the website and the html editor allows you to add code into an element and that you can have display anywhere on your website all of them you can have display anywhere on your website but these are the three options that you have the one we want to use is the default option okay so now that we've selected that default option we can then go ahead and create anything that we want here and plug it into our ultimate menu and i'm going to show you how to do that right now so the first thing we're going to do let's go ahead and create a full column mega menu inside of here and we're going to do that by creating a section we'll call this one food recipes and i'm going to come over here and i'm going to look for the row layout i'm going to select one column row okay and then i'm going to add a four column row inside of my one column row so i'm going to click on the plus sign row layout and this time i want a four column row okay so i'm gonna select the ones that are even right here and here we go so now that we have this let's go ahead and start styling this so i'm gonna select the outermost row and remember you can always extend the layout tree here so i'm going to select the outermost row that we have i'm going to go to my padding and margin and make sure that i have enough margin around it so we're going to put 30 pixels of padding around all of this okay great that looks a lot neater and a lot tighter now then the next thing i'm going to do i'm going to close out of this here the next thing i'm going to do is i'm going to put some headings so you can kind of start seeing how what the possibilities are and how much more flexible this would be so this is we're going to place this entire thing into our mega menu so we're going to come here click on the plus sign i want an advanced heading and we'll call this one breakfast okay then next i'm going to duplicate this across the other columns so let's go ahead and duplicate that i'm going to drag this over here another way to be able to do this is you could also just copy it click into the column select the paragraph and paste select the paragraph and okay all right so now we have our headings and let's just change this into their respective headings right so lunch dinner and desserts okay next we need to put the menu items that we want so one of the good uh one of the good blocks to be able to use for this is the icon list block so i'm going to select that and we're going to come here and i'm going to search for icon and here's the icon list select that and then in this list we're going to start listing some breakfast right so we have ham [Music] and eggs we'll do pancakes and waffles and last but not least we'll do oatmeal and cereal okay so now we have our food recipes for breakfast i'm gonna go ahead and populate the rest of these so that we have items under each one relative to the type of food that it is so i'm going to come here select this list well actually before we do that let's go ahead and style the list so that way we're copying everything already styled so i'm going to select the list here and we're going to go to list styling and we're going to edit all the icons together and the only thing that i want to do here is i want to change the icon color to the dark orange there we go now i can go ahead and copy this click into this column okay make sure that i'm on the paragraph block and command v on the mac or control v on a pc same here and now it's just a matter of changing the the text to match so let's go ahead and do that right now [Music] okay so now we've populated all the different menu items let's also go ahead and make this a little bit more dynamic by adding a divider between the heading and the list of food items so i'm going to come here click the plus sign i'm going to type in divider and we're going to select the space divider right here okay so this looks pretty good now i'm going to make some changes to it so over here to the right i'm going to align it all the way to the left or actually let's keep it centered just for this time let's keep it centered and what i want to do is i want to change the divider style and i want this striped style like that and then let's make it a little bit darker so that we can see it there we go and that looks pretty good yeah i think i do want it uh i do want it left aligned that way it's directly underneath and it's flowing properly i'm gonna leave the spacing uh of it i'm going to change the height to 20 and then i'm simply just going to copy this and then come here click in select the paragraph command v and repeat it across the other columns so right underneath the header select paragraph after you've copied it and press command v and same thing here paragraph command v all right so now we've uh we've created all this all right so now this looks uh this looks really good i'm really happy with it happy with the way that it turned out i'm going to go ahead and publish this okay and i can go ahead and view my elements so this is what the element is going to look like this is exactly what i want to put underneath the underneath the ultimate the ultimate menu mega menu right so we're going to use this as our mega menu so i'm going to go ahead and go to the menus and now i'm going to show you how to do this there's a specific way that you have to do this so to be able to to be able to add your your element to a mega menu first let's go ahead and create our custom link you can also do this if this were a page but it's just faster to do it as a custom link so i'm going to open up the custom links option here i'm going to put a hashtag to nullify the link and we'll call this food recipes okay this is gonna be our parent menu i'm gonna go ahead and add that so it's right here food recipes and then i'm gonna create one more i'm gonna another hashtag for a custom link and this time i'm gonna call this food recipes content and add that to the menu okay and then i'm going to drag it or drag it once over right so from here i'm just going to drag it so it looks like it's a drop down right now if we open this up you'll notice i don't have the option to make this into a mega menu yet and that's because i have not saved the menu so i'm gonna go ahead and save the menu and now the menu is saved so next now we can go ahead and start configuring the mega menu under the food recipes so i'm gonna go ahead and select this uh select the parent one up here so the food recipes one i'm gonna click on menu item settings and i'm going to disable the link okay and then the uh rest of the settings here i'm gonna leave alone on the next tab are the mega settings i'm going to select the mega settings and i'm going to enable mega menu drop down i want this one this time instead of it just being the content width i want this to span the full width of the page so i'm going to select full width and then under mega menu columns i'm going to select one column why because i've already created my columns inside of the element so i'm just going to select one column the drop down background i do want a background for this one so i'm just going to do a light colored background and then everything else i'm going to leave the same i'm not going to make any more changes to this one i'm going to go ahead and save it and close it okay so that's already set next i'm going to go ahead and configure the food recipes content basically what i'm doing here is i'm going to place my element in this link okay so i'm going to go ahead and open this up click on menu item settings we're going to disable the link and then i'm going to go to mega settings and under mega settings you'll notice that we have an option here called enable custom content we're going to toggle that on and then we're going to select our food recipes as the custom element that we want to enable our custom content on i'm going to go ahead and save that and now this is prepared now there is one more step that we have to take so i'm going to go ahead and save this menu i want to show you something now that i've saved the menu if i visit the page now so if i go to the page you'll notice that our food recipes is there but when i hover over it nothing happens i don't see anything okay here's why once you've created your container right we do have to do one more thing to that element to make it show up here okay so to be able to do that we're going to go right back we're going to go to elements and we're now going to assign this element to the entire website okay so what i'm going to do is going to come here go to edit this is our element it's already styled and up here i'm going to select the page settings for the element so you see here that the placement is none this is fine but we need to set up the display settings so the display settings here currently says show on none that that we need to correct so we're going to make sure that this shows on the entire site it's very important to make sure that this shows on the entire site in order for it to show up on the front end so now that we've set this up as a rule we can go ahead and update our element and now we can go to the front of the website let's refresh the page and when i hover over food recipes our mega menu now shows up very beautiful very well styled and this looks a lot better than the basic one that we have right here right so if you look at this one compared to this one this is a lot more presentable this looks this looks a lot better okay so now you can see how important it is to when you have the elements feature in cadence theme pro with that you can pretty much put anything you want into a mega menu and to prove it we're just gonna do one more uh where we're gonna put other items in here things like images icons info boxes forms and so on we're gonna do that just one more time and then we will wrap up this tutorial hey if you're enjoying the tutorial so far do me a big favor and smash that like button also feel free to leave a question in the comment section below and if you have not subscribed to the channel please subscribe and help the channel out all right let's go ahead and create one more mega menu and wrap up our tutorial for our next mega menu we're actually going to recreate this goodies mega menu which has the info boxes here so these four benefits and then an opportunity to opt in or to contact the owner so let's go ahead and do that right now so i'm going to go back to ours right here and we're gonna place that goody menu right here on to the right next to the social media icons so what we need to do is go back to the dashboard go to appearance cadence elements want to click on add new and we're going to select defaults we're going to call this our goody goodies menu and let's go ahead and set up the placement right now so i'm going to go to display settings and i want to set this to entire site and then the next thing that we want to do we want to go ahead and add a row layout and we're going to add a one column row layout click inside of that and next we're going to add a three column rule layout actually yes actually a three column rule layout but this one's a little bit different we're going to need more space for the um let's add some more space for the form so we're going to go like this okay or actually you know what we don't we don't even need to do that let's just keep it even all right it's perfect so next we're just going to start adding adding our elements so we have a info box some search for info box okay there's one info box let's go ahead and style our info box we're going to call this chef's cookies all right and over here to the right where we have all the styling options i'm going to go to the container settings and we're going to get rid of the container background so i'm just going to make that transparent by adding a 0 here and make sure to do it on the hover as well or just to make it fun why don't we go ahead and add a background our own background yeah so a little bit lighter color yeah there we go and then the container border we can leave that the way that it is and the hover background will make this a little bit a little bit darker there we go okay that looks good next we need to address the orientation of this so i want everything to be aligned content aligned to the left i want my media settings here i want my icon to also be aligned to the left and i also want it to be at the top all right that looks good then the next thing that we need to do we need to reduce the size of that a little bit so let's go ahead and put that at 20 pixels actually 30 pixels is good 30 pixels and we're going to change the icon color to our color here looks good and then the title settings i want to just reduce the size of the title we'll make that 20 pixels and that looks good and then we're also going to reduce the size of the of the content of the text so text settings and this size will be 16 pixels there we go all right that's looking pretty good the next thing i want to do i want to add some rounded corners to the container so i'm going to go back up here to the container settings and here where it says border radius we'll make this 8 pixels all right excellent now all we need to do is just replicate this but before we do that let's add some margin to the bottom i'm going to add 10 pixel margin to the bottom top margin 10 pixels okay so now next thing i want to do is i want to duplicate this so what i'm going to do is i'm going to click on the options click on duplicate and then we're going to then i'm going to then copy click on the next column select paragraph command v or control v if you're on a pc and then we're now going to duplicate this one as well all right and then we can kind of change these to be other stuff so we can say this can be chef's cakes chef's ice cream and chefs entrees all right so next thing we need to do is just add a simple form here so we're going to do is going to click on the plus sign we're going to search for the cadence form let's select the irregular form and we can make this a contact form if we want to or we can make it an opt-in form as well so let's go ahead and make it a contact form this time and what i'm going to do on this one is i'm just going to leave it just like this and create some spacing between everything so that everything looks nice and tight so i'm going to select the section and what i'm going to do here on this section is i'm going to give it a padding of 30 pixels all the way across and theory just like that for the button i'm going to make say make this a contact us or contact me and for the button style i want the button style i like it when the button style goes all the way across so let's make that full excellent looks more uniform that way all right excellent and then uh we're also going to put in let's put in some text that's uh says to maybe some contact need text so let's add a heading so i'm gonna come here click the plus sign advance heading i'm gonna say contact me and let's shift that up to the top okay so far this looks that looks really good and then we can do some nicer things here too you can decide to add a background to this right so i'm gonna go ahead and add a background to this section so i'm gonna select the entire section here go to select an image and within this image we'll go to media library and let's grab a nice background here that shows her making something okay so now we have this background okay and now since we're going to have this background uh one thing that would be really nice to do is if we could have the background be a overlay now one of the things that you'll notice is that the sections in the row layouts don't have overlay capability they have a background image capability but they don't have the ability for you to have an overlay if you want an overlay this is going to have to be a row so what we need to do then is we can quickly correct this by putting all of this into a row and the way you do that is you just come down here to the bottom of the section itself so let's make sure we have this section selected and there's a block allowance right there we're going to click on the plus sign and i'm going to select a row layout and i want a one column row layout right here now we really can't see it so what i'm going to do is i'm going to get rid of this background image and you can see that the rows right here okay and what i'm going to do is i'm now going to drag this form that we have into that row so now that's in there and i'm also going to drag the contact into the row as well right on top of it okay and to verify that we're inside the row i'm going to go ahead and open up my layout tree and you can see here we have the section there's the row layout and you can see our items are inside of the row layout now since we have that have it that way then what i do want though is i want the section uh to not have the padding so let's just eliminate all that padding that we put there before and this time we're going to select the row layout and i want that to have the padding so i'm going to come here padding and we're going to set this to 30 pixels all the way around all right and now i can make some styling changes to the background as much as i want so now i'm going to go over here to the background settings we're going to select an image and that image is going to be the same one that we had here select and now i can go ahead and add a background overlay so this is a cool little trick that you can use to get a background overlay inside of a section and let's increase the opacity a little bit so that we have some there we go nice opacity right there and then we're going to make the heading color white and just to make it even nicer let's add some some paragraph text here i'm actually using advanced heading again but this time we're going to use a paragraph and we're going to say for inquiries please feel free to reach out and from here we're going to change this to white all right so now we need to change our form so that it goes well with the it goes well with this background so i'm going to go ahead and close out this here right here so we can see the full thing i'm going to go ahead and select the form we're going to look up the label settings here label styles i want the label color to be white and then i we're going to look at field styles and for the field styles we want the input background here so we're going to select white but then we're also going to make it transparent so it looks just transparent just like that okay and then on the input border we're going to make that white so that it stands out a little bit more all right and now let's take a look at our work and see how that looks actually really really nice so just to do one more thing we're going to select this outer container right here the outer row right here and we're gonna go to border settings and we're gonna give it a border radius of eight all right and our our goodies menu is now ready so we're gonna go ahead and publish this all right and now we need to go and add this to our mega menu so what we're going to do this time is we're going to go out here to appearance menus and this time i'm going to create a new menu and we're going to call this our goodies menu okay and the goodies menu we're going to assign it to our secondary location for the website and click on create menu then from here we're gonna do a custom link we're gonna do a hashtag for the to nullify the link and we're gonna call this goodies add that to the menu and then we're going to create another menu and we're going to call this goodies content add that to the menu and then we're going to shift it over and now save which is now going to give us the ability to be able to make menu item settings changes so i'm going to click on the changes on the top one here so this very first one we need to set up the mega menu settings come here i want to disable the link i'm going to select an icon this time and i want a gift icon all right so the gift icon i want that on the left i want the icon color to be the color uh our orange color here everything else looks great then i'm going to i'm going to go to the mega settings and enable the mega menu drop down i want this one to span the entire full width of the page we're going to make the mega menu columns just one column let's make our links color so let's make the links color our color here hover a little light and active will make that dark okay and then everything else looks good so now we're going to go ahead and save this we're going to now go to the second menu item which is the actual drop-down click on menu item settings and then from here we're going to disable the link and then on the mega settings we're going to enable custom content and this time we're going to select the goodies menu and click save that's all we need to do there now that we've done that let's save the entire menu and now when we go to the home page all right we'll notice that you don't see the goodies item anywhere that's because we haven't assigned it yet so to assign it go to customize and remember what we wanted to do is we wanted to assign it to this side of our header so we're going to go to our header and we're going to search for our secondary navigation which is right here one of the available items we're going to go ahead and drag that next to the social media icons and now you can see our goodie goodies menu is now in place now i have our goodies menu here on the side and everything just looks great so we have our form we can go ahead and fill out our form click on contact me here are the benefits that are option and now you can see we have all these different types of mega menus right so we have the basic mega menu we have this much more well designed elements mega menu and then we have the goodies mega menu as well all right and that will wrap it up for this tutorial hey if you enjoyed this tutorial please go ahead and smash that like button for us so we can get some help from the youtube algorithm if you're new to the channel please go ahead and subscribe if you want to get notified about videos like this or whenever i release videos like this i'm making a lot of tutorial videos on cadence cadence pro and many other themes and plugins and if you enjoy those types of videos then you're definitely at the right place i want to thank you for watching the videos and to my subscribers who have subscribed thank you very much for doing that and i will see you in the next video [Music]

Channel: CliftonWP

Views: 1,073

Keywords: kadence theme tutorial, kadence blocks, kadence wp, kadencewp tutorial, kadence blocks pro tutorial, kadence pro tutorial for beginners, kadence pro tutorial, kadence pro theme tutorial, kadence blocks tutorial, kadence hooked elements tutorial, kadence mega menu, mega menu wordpress, mega menu tutorial wordpress, mega menu tutorial, ultimate menu, kadence hooked elements, wordpress tutorial for beginners, wordpress mega menu tutorial

Id: TFOos0bTJys

Length: 48min 19sec (2899 seconds)

Published: Sun Oct 03 2021