Building a custom Divi menu takes more skill than simply dragging things in to place. This tutorial will help you produce a mobile app style menu using the Divi Theme Builder and a few lines of code.
Share the projects you build using this layout so I can check them out…
Insert this code inside the column that holds the blurb modules
So in this video, we’re going to show you how to create a custom Divi menu. So before we jump into this video, I wanted to take a second and ask you to please hit the subscribe button, tap that bell for notifications and go through these videos that you like, give them a thumbs up and leave some comments below. We absolutely reply to all of them. So let’s get into the video so you can see here, we’re in the back end of WordPress. We’re in the dashboard 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 0.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 0.8. Now the only thing that we’ve done different inside here, and 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 and 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. One of these spots, probably over here, but you’re going to be able to watch this old. And 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 liked 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 and you can see this looks a little bit differently because again, we’re using that WP and Divi icons plugin. So we’re going to go and we’re looking for just a house or something that would resemble I’m 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. He’s a font size. So 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’ve 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 that shows up a little bit better. Right? So the one bit of CSS we’re going to have to do is that this blurb image margin bottom negative 28 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. And we can go in here and S 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 don’t go into the conversation, let we 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, and 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 what we’ve got here. Might need to change some of the spacing. And now we’ve essentially got 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 they was, they shrink in a bit. We could change the spacing here as well. You know, margin bottom padding, bottom, copy this spacing. 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 into 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. Now we’ll go back in the 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 in the spacing, make sure there’s nothing there that works out just fine. 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 fixed 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 liked the settings. Actually think we’re going to leave that and we’re going to 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, it looks pretty awesome. Like there’s a great grid here. You’ve got your menu in place. We can 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 the con the actual dynamic content, set it to site logo, and we’ll just hit, okay. 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 a site and see kinda 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, unless you jump into the front. So we should see the one menu across the top, which we do. It’s ugly. We didn’t send 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, 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 go into the menu under spacing. And we’re going to tie that batting together as well. And let’s open up our grid view or wire frame view. And we’re going to add a little bit of space to the road, but we’re going to shrink it in. So it’s only going to be 10 when 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 and 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 basing here is because of our sizing logo, 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 could change the colors up. You can style the links as you see fit. So menu texts could make the active one white. We can make the rest of the menu, why we can make them bold.
It make them, make the text bigger, completely customized this part. And then as we shrink down, it just becomes down here. So we said we wanted to open this dropdown menu in a different way. So the dropdown menu I guess the layout is actually what controls that. So drop down menu direction. We wanted to go upwards. So now when we click on this, the menu is actually gonna open up. We’ll hit save to exit out of the menu adjustments. We’ll save the layout and go back into the website into the front end one more time, close that and hit save just to, 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 will show you the inspect tool. So here’s our mobile menu, 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 to view 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 hundred view with, and since we’re, we’re negative 70, let’s actually try 50.
And I guess we’ll have to go all the way up to 75 foot, 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 to see how it is. 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 it and go back into our layout, back into the page settings that we did a little while ago to advanced and to 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 texts can change too
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 and make sure it’s not stuck on hover. Just want to validate the work. Yeah. So it looks like we’re gonna 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 eye icon or the wrong item. Let’s try that one more time. We’ll go back into design, hit this, change it to black here and make sure it’s blue on a hover. All right. So we’ve got that. We’re going to extend this to all the blurbs, and then we’re going to try that text one more time. So go to title text, go down and 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 blurbs styles throughout this page, and we should be good to go now. So we’re going to do a save this, 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. You got our icons here. We’re going to hover over. You can see the Texas change. If 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 is going to be that color. So we’re going to extend the icon all blurbs throughout this 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 is when you’re building websites, not everything is perfect. And sometimes there are obstacles. You’ve 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 of kind of what this thing would look like because it’s down low, it’s fixed. This’ll 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 and 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 and certain use cases, probably not a good idea to not have the names there. Maybe they could be their 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 device 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 posts. We’ll, 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, and I think it’s gonna 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 going to 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.