How To Build A Custom Divi Menu 2020

so in this video we're going to show you how to create a custom divi menu and we're just going to go through this tutorial i want to show you first and foremost like we do in every one of these videos exactly the setup we're using so we've got wordpress 5.4.1 everything is up to date we're going into the themes i'm going to show you the version of divi that we're using so we'll open this up we've got divi version 4.4.8 now the only thing that we've done different inside here we'll show you the plugins and everything to give you the idea is that we've installed this wp and divi icons from aspen grove studios i wanted to expand this and again we're going to take this we're going to build out a custom divi menu we've done it before and we're going to link up our old video but you're going to be able to watch this hold on when we did some really custom stuff and then to compare between the two like the old video we had to do a bunch of css and here we're going to do almost all of it using the theme builder and the visual builder so first things first we're building this for mobile and we're going to have a basic menu for desktop as well but we're going to go under theme builder and inside of the theme builder we're going to build a new global header so let's build global header and we're going to kind of set the stage here and i always like to build from scratch and we're going to go with one row and we're going to do a blurb first off so here's the first thing i want to do is delete the image i'm actually going to use an icon and let's say i wanted to i wanted to use home let's find a house you can see this looks a little bit differently because again we're using that wp and divi icons uh plugin so we're gonna go we're looking for just a house or something that would resemble um going home so it could be you know it could be like this that would work and then you can go in and edit this use a font size we want it to be pretty small go back onto the first one and the text we're actually going to delete all of this title goes here so we put in home we'll go under title text and we're going to center this and we can change up the font let's say we go with something like this maybe we go light and we want to change the text maybe light doesn't work we can go with regular that shows up a little bit better right so the one bit of css we're going to have to do is add this blurb image margin bottom negative 20 pixels we need to get that title closer to the icon so 20 is probably about right so we'll do something like this right we've got our little blurb and then the other bit of code that we have to do is that we've got to put flex on the row itself so we're going to put display flex and we're going to justify content so we're going to hit the space between that way the first one will be at the at the beginning the last one will be at the end we can go in here and and change things up a little bit so if we had one let's say this was services we can go under the icon here and we can change this we'll go and look through all the icons and try and find one that resembles services it will do something like that and then there's contact us we'll change this up just a little bit and it'll go into the conversation contact and this last one can be really anything i mean honestly it could be rather than a blurb you could take this one off and we could just add in the menu module and you can select any menu that you want and we'll just have to change the elements we don't want any of the other things we want this to just be right there right and the beauty is whenever we shrink this down it's going to look something like this everything's going to be in line we can change the icon colors you can make this black as well hamburger menu we can actually change the size of the hamburger menu itself so it can be more in line with you know what we've got here might need to change some of the spacing and now we've essentially got this this pretty cool looking what would look like an app style menu and we can change you know padding over the top margin over the top and bottom that way there's they shrink in a bit and we could change the spacing here as well you know margin bottom padding bottom copy this spacing and actually we could just extend to all blurbs in this page it'll go to those first three hit save and then we can go into this menu go to spacing and do the same thing here so now everything's pretty much the same height everything is pretty much in line and we can change the spacing on the section and make it so that maybe there's a a little bit of padding above and beyond or above and below and that's kind of what we what we're working with here if we needed to change this right here we could do it we can go back under under our menu you can go under grid view if things overlap that way we'll go to menu go to background and we'll just delete that one that way it's transparent and now we've got this look right here and i'll go back into spacing and just tighten it up and let's go back into the column back under the custom css if we align items to the center that means this is going to push down a little bit now everything should be in the middle and we'll go back into the blurbs themselves the settings will go down into spacing make sure there's nothing there that works out just fine and so the next part is we want to go under the section and the position we're actually going to make this fixed and we're going to make it fix directly at the bottom of the page you can see the whole thing is fixed down to the bottom and the other part is visibility we don't want it available or don't want it visible on desktop because that menu just won't look right it needs to be so small or small enough that it has the menu icon we'll hit save and let's actually go in and we'll duplicate once more and we'll change this last blog up so contact services about and let's see what other great icons we have and this would this would really be dependent on obviously your setup and and what it is that you are trying to accomplish with your site i kind of like the settings actually i think we're going to leave that we're gonna go account that way you can change settings on your account right so this looks like this on desktop i mean on on tablet and then it shrinks in a little bit whenever we go to mobile and we can change the icon sizes so if we went into menu and decided our icons we wanted to make it a little bit smaller here on that looks a little bit better let's see about spacing if we can actually get rid of all the spacing looks like we might not might not be able to adjust it but it looks looks pretty awesome like there's a great grid here you've got your menu in place we could hit save and you know let's jump out of here this will now be the main menu what we would also want to do since this is only visible in tablet and on the phone we need to have a desktop menu so we'll just drop something very very simple we'll bring this menu down here since we just duplicated it that way it's set to main we'll do con the actual dynamic content and set it to site logo we'll just hit ok now this section under visibility we're going to disable it on tablet and desktop that way it's only on the i'm sorry on phone and tablet that way it's only visible on desktop and we're going to hit save that way this we have a menu on our website on desktop so we'll close this make sure everything is saved and we'll take this back out we'll jump into the front end and we'll be able to take a look at the site and see kind of what it looks like since this was the first time that we made this global header you want to make sure hit save changes here and let's jump into the front so we should see the one menu across the top which we do it's ugly we didn't set any sizing on it we didn't do anything at the top we just created an empty section which has a bunch of weird space but we can always tighten that up but what i really want to show you is that whenever you come in here and we go to tablet size right there our menu jumps to the bottom we've got our little menu it just opens down right now which is obviously not the way we want it but we can add some additional code and we can put some links here and we can continue to tighten this thing up so let's jump into the back end again we're going to go back into the theme builder and we're going to adjust a little bit of this global header here so the first thing we're going to do is go into this section right here we're going to eliminate a bunch of that size there's so much spacing at the top and the bottom so we need to shrink that in a lot all right so now we've just got this big amount of space which we want to shrink in here as well i don't know where this thing is going going to the menu under spacing and we're going to tie that padding together as well and let's open up our grid view our wireframe view and we're going to add a little bit of space to the row but we're going to shrink it in so it's only going to be 10. when we go back to the front you're going to see should be should be significantly smaller but it doesn't look like it took so let's actually put a little bit of color on this section we turn this background just a little bit gray and we need to shrink our sizing so we can go down here there should be on the menu itself i guess my background didn't stick so we're going to change the background color one more time we're going to go into the menu that's why there's so much spacing here is because of our sizing max width we need to shrink this logo when we do that we're good to go we'll go with a little bit of a darker background just since our logo is pretty light we can go maybe somewhere more in the middle and you can change the colors up you can style the links as you see fit so menu text you can make the active one white we can make the rest of the menu white we can make them bold make them make the text bigger completely customize this part and then as we shrink down it just becomes down here so um we said we wanted to open this drop down menu in a different way so the drop down menu um i guess the layout is actually what controls that so drop down menu direction we want it to go upwards so now when we click on this the menu is actually going to open up we'll hit save to exit out of the menu adjustments we'll save the layouts and go back into the website into the front end one more time close that and hit save just just to be safe and we'll open the front end of the site in a in a new browser or a new tab because what i want to do is show you like it's going to open but it opens very very small right so let's right click and inspect this we'll show you the inspect tool so here's our mobile menu it's the whole thing we want to hit the plus and it's going to give us this option all right so we're going to try the few with this time to be able to see if we can move this over the proper amount so we're going to go negative 75 on the view with and we're going to pick the width as a 100 view width and since we're negative 75 let's actually try 50 and i guess we'll have to go all the way up to 75 if it moves it over that way so that looks pretty close and if we go another five it puts it right to the end of that menu which actually doesn't look too bad so let's actually shrink this this size in a little bit and see how that see if it adjusts so see how it's actually going to adjust a whole lot more because we're using the view with much better much more effective way to do it and as we shrink all the way down our menu actually still looks really good perfect so we're going to take this code we're going to copy and go back into our layout back into the page settings that we did a little while ago to advanced into custom css and we're going to replace all of it with what we just put in place that works for me i'm going to hit save we're going to close this out we'll expand back and then you know there's some styling things that we could definitely do so i would suggest for your image icons we've got the color i would go to hover change change the color on hover to where maybe it's blue on hover and then we can go to title text and change that as well so the title text can change to blue on hover as well and we would extend this to all of the blurbs on this page and we would go back to the icon color as well so icons extend this this image and icon style to all the blurbs that way everything looks the same we'll exit out of that let's actually go back in to make sure it's not stuck on hover just want to validate the work here so it looks like i have to set that to black that's okay though reset oh that's what's going on here i think i hit the wrong icon or the wrong item let's try that one more time we'll go back in the design hit this change it to black here make sure it's blue on hover all right so we've got that we're going to extend this to all the blurbs and we're going to try that text one more time so go to title text go down make sure it's black by default on hover we're going to change it to blue and we will double check it one more time black and then both are blue silly weird okay we'll extend this extend the blurb styles throughout this page and we should be good to go now so what we're going to do is save this i want to make sure that our stuff was still intact we're going to save this layout we're going to jump back into the front we're going to refresh the page we'll shrink everything down that way it's the size of tablet we got our icons here we're going to hover over you can see the text is changing for some reason the icon didn't take hold very very weird but that's an easy fix and one that we can take care of while we're still inside of this layout so let's go under here icon icon is going to be that color so we're going to extend the icon all blurbs throughout the sale throughout this page let's hit save and we're going to try it one more time in the front end you guys know when you're building websites not everything is perfect and sometimes there are obstacles you got to jump over so we're going to hover boom boom boom we got the blue we got that we're going to extend this we can style the bottom we can style this icon as well and so here you know you've got this like we said it's like an app we're going to go into the blog real quick and i copied the blogs over from from my website so i just wanted to give you an idea kind of what this thing would look like because it's down low it's fixed this will be pretty much just like like a web app and as you scroll that menu would sit at the bottom of the page works great blurbs are a perfect use for this and i would probably shrink down the icons just a bit make them smaller maybe actually get rid of the text underneath it completely you could it's up to you if the icons do a good enough job of telling the story you don't need them unfortunately i don't think with with some of these websites in certain use cases probably not a good idea to not have the names there maybe they could be there on hover you can play around with that but this is how you can build a really cool custom menu that is different depending on the the device so on desktop we've got this and as we go down to mobile you've got something that looks a little bit better a little more like this i think it's pretty cool we're going to make sure we link up to our blog post we'll put the code here we want to make sure that you can get this that you could duplicate this on your own website it's a pretty easy deal and i think it's actually quite easy to accomplish i think it's going to make your websites look and not only look good but they're going to function better because you know we're all using these super giant phones and the little hamburger menus at the top just don't cut it anymore too far we can't reach it with one hand this type of menu is absolutely perfect to where you can use the four main things that people are gonna go to often whether it's support whether it's the about you for your company your products or whatever and then have a sub menu that they can access from there as well to get to the other parts i think it's awesome i hope you think it's awesome let me know what you think in the comments below and if this has been a beneficial video as always hit the thumbs up subscribe to the channel we'll see you in the next video [Music] [Music] you

Channel: Keegan Lanier

Views: 22,643

Keywords: custom divi menu, divi, divi theme, wordpress, wordpress menu, wordpress customization, divi customization, divi tutorial, elegant themes, divi menu, divi tutorials, web design tutorials, wordpress tutorial, divi 4.0, divi builder tutorial, divi builder, divi tutorial for beginners, divi theme tutorial blog

Id: hhae0fw9hNQ

Length: 21min 5sec (1265 seconds)

Published: Sun Jun 14 2020