How To Build A Custom Divi Menu 2021
October 10, 2021
October 10, 2021

How To Build A Custom Divi Menu 2021

Join The Community

My favorite time of year

I love revisiting the topic of building a custom Divi menu. Not only is it fun, but it's incredibly useful for my library of layouts and yours. I always make these layouts free. You can use them on your personal site or on a client site.

This year is no different. This layout is both practical and it looks great! It includes some custom flex code for built-in CTA buttons. It also looks very unique on mobile.

I really think you're gonna love this one…

Disclaimer: Some of these links go to one of my websites and some are affiliate links where I’ll earn a small commission if you make a purchase. These affiliate link add no additional cost to you.

Video Transcript

Keegan 0:00
What’s up YouTube today we’re doing another version of the most popular videos that we’ve had on the channel, which is all about the custom menus. And I’m not going to waste any time, let’s just jump right into the video. You can see here we’re working with WordPress version 5.8. point one, we’re working with Divi, as always, and today’s version is four point 11.1. That’s as of October 3 2021. And so we’ve got the stage set just a little bit, we’ve got a few pages, we’ve pulled the butcher layout that is built by Elegant Themes. So we’ve got this going for us. And yeah, we’ve got a little bit of a menu.

Keegan 0:39
So we’re going to build a custom menu that is going to look like it’s sort of floating, let’s jump into the theme builder. And we’re going to add a global header. So we’re going to build global header. And what we’re going to do is something that is, I think it’s going to look really clean, I think it’s going to fit in pretty well with the with the butcher layout. And we’re just going to we’re going to play around, we’re going to see what happens. And yeah, so we’re adding in this menu, we’ve got the logo here, we’re going to pull the site logo, which have already set up is this little cleaver. And what we want to do is add a black background, we’re going to take away the background color of the menu, I’m still not 100% sure why Elegant Themes does that.

Keegan 1:29
But they do, we’re going to make the active link, we’re going to change that up a little bit later. But let’s just make the text white, we’re going to make a few changes to this, we’re going to do Poppins. I really actually like that even at 14, I think it looks I think it looks sharp. But what we do need to do is change the size of the logo, the logo is definitely too big. So let’s do 60 pixels. I think that looks pretty sharp. Now, obviously, we wouldn’t want a menu that looks like this. That’s a little bit much. So let’s go ahead and let’s change a few things. So I do want to change the position, it won’t be relative, it’s going to be absolute, I want to absolute center it in the middle. Vertical index has to be up there, our z index has to be up.

Keegan 2:23
And we’re going to go to spacing next. And I’m actually going to push it down 10 pixels. But now we’re going to change the width and we’re going to go to 90%. So that’s going to shrink this whole thing down just a bit. And something else we’re going to do is the borders. So I want to change the border radius. And we’re gonna go try eight and see what that looks like. I think eight looks pretty good. And we’re going to add in a little bit of a box shadow. So this thing looks like it’s floating above the rest of the layout as we do that. But then we’ve got to also shrink this thing down. So let’s, let’s put this section as the other section has zero spacing, and then we’re going to shrink in the spacing here on the on the row itself. We’ll shrink that in, I think it looks pretty good.

Keegan 3:19
One thing we do need to do is I want to change the actual sizing of this row. So we’re going to go 100% on max width, which will expand that out. And then we’re going to go 100% width here as well. And let’s add some padding on both sides, let’s say 25 pixels. That way, it sort of shifts and just a bit. So I think that actually looks pretty awesome. What I am going to do is change this up to where we split and have a second column, because I want to have a button over here as well. And this button is going to be right aligned. We’re going to style it up a little bit, trying to do some black text with a white background. And let’s make it match. So we need to do pop ins as the font and I’m going to shrink the text size. Not by much, but by a little and then we’re going to change the font weight. That way it kind of pops a little and we’re gonna leave, we’re gonna leave it normal with no icon. And let’s go back and change the content. Let’s just say Order. Order now.

Keegan 4:43
And now we’ve got to space this out properly, right, so let’s go back into the row, hit column number two, go to Advanced Custom CSS and let’s add a little bit of margin. We’re going to hit audio auto and zero pixels. And that that will shift it but we’ve got one More setting that we’ve got to change. And did, he does not equalize the column Heights by default. So we’ve got to go under sizing or design and sizing, we’ve got to equalize column height, and that will push it down, only part of your traffic is going to come from desktop.

Keegan 5:15
So what we also have to do is looking at it on mobile. So we’ve definitely got to make a few changes as we take this thing to mobile, right. So if we go under menu design and icons, we can change the hamburger menu, we can actually change the size of the hamburger menu as well. I like it being large like that. And then we can go down here to the button, we can align it a certain way here on mobile, we can even go and try and add with to be 100.

Keegan 5:52
Now, what we need to do is make sure that that’s only happening here. And so this looks pretty good, you know, we’ve we’ve got it set up to where this is going to work on all screens, we’ll go ahead and save and exit. And we’ll test this out in the front, we’ll see what it looks like in the real world. All right, so we’re going to save that layout. And let’s jump into the front and see what happens. So we have this menu sticks right there. Now what I do want, though, is for it to actually stay there. And so what we didn’t do, I think we made it absolute. But we didn’t make it fixed. So let’s go back in there, we’re going to change the position of the section itself. And let’s go back down into the position. And it’s absolute, but it does need to be fixed. So we’ll put it back, right there in the middle, hit save.

Keegan 6:51
Exit, we’ll go back out to the front. And honestly, all should be right in the world. So let’s see, we’ve got this menu that hangs over. And as we scroll, everything sort of scrolls around it. I think it’s a cool menu. It would it actually looks pretty cool on mobile as well, we’ve got to change up the fonts that we missed. So let’s go back into the theme builder, I was actually adjust everything that’s going to happen for mobile. So we’ll hover over the menu one more time. And let’s go into design, drag this out where we can really see in menu text.

Keegan 7:31
So the active link actually like to make it more of like a darker, deeper red. So let’s do that. And hover for the menu, I’m going to make it that same color. And we’ve got to continue to go through and make sure these adjustments are happening on mobile as well. So the drop down menu background, let’s make it white menu line color transparent menu text active is going to be that red. Have it copied still. Mobile text will do Black will hover over it. And we’ll drop in that that red as well. And then the mobile menu background will do white or sort of a Yeah, that’s completely white. hamburger menu icon is white. That works. Perfect.

Keegan 8:28
So let’s go ahead and save this. We’re going to exit one more time. So one of the thing that I want to do is add an icon over here on the order now. So what we’re going to have to do, so we’ll pull up the settings here for the button, we’re going to come down and we’re going to add the button, I want to make sure it’s on the left and that it does not show up only on hover. And then we’ll add some spacing. Yeah, something like that. And it may change depending on the icon that we select. But we’re going to go through here and find an icon to actually place an order. So it could be it could be something like this, something really simple and then we can tweak the actual spacing here to where it looks just like so. I like that. I think it looks good. So we’ve got all this in place. We’ve got our columns in place, everything shrinks down looks really really good on mobile. And we can go ahead and save this will go up we’ll preview it again on the front end, just to be sure that everything is as it should be.

Keegan 9:47
And again, we’re going to drop that thing down. I think it looks looks really good. I think this is a pretty cool menu. The only thing that I would do differently Is that I would move the placement of it on mobile. And so let’s go into the header one more time. And we’re actually going to change the location of this entire section, only on mobile. So if we go here, we’re going to go down to tablet, and we’re just going to move it down here. That way, everything is down at the bottom of the page. And then one other thing we’ve got to change in the menu is this right here. We want that to open upwards. So let’s save. Go ahead and exit, we’ll make sure we’re double saving. And then we can exit here.

Keegan 10:59
Go back to the front end. And let’s let’s go to different pages just to make sure everything looks good. You can see the arms everything up here, we can even make this a little bit opaque if we wanted, which I think I might actually do, we’re going to add that in. But this looks good. And then we shrink down in the mobile. We’ve got our menu here and let’s move this up. So we’re going to have to add some sort of spacing down here at the bottom. But that’s going to open up looks pretty solid. So let’s go back in, and we’re going to change the opacity a little bit. So we’re going to go to the background, highlight this and we’re going to go down to, let’s say 85. And we’re actually going to add a filter in and to do that we want to use the backdrop filter option. So we’re going to do that. For some reason Divi does not recognize it, but we’ll see it on the front end. Let’s exit before we do that we do need to add spacing here 345 on the bottom, save one more time, and then we’ll exit and this should put a bow on this menu.

Keegan 12:38
To see we’ve got that little bit of an effect behind this looks good. Got the blur that’s happening here. The it looks really really really solid gray looking menu. And when we shrink down we go here we’ve got the same effect everything looks good. Still order now menu opens up. And that puts us at a completion point. So this menu is the custom menu for 2021. I hope that you really like it, we’ve used a couple of different options, you know we’ve got this great looking mobile menu and we’ve got a great looking super clean menu that’s going to work on desktop as well.

Keegan 13:23
So this is something that we’re going to save them in a package, you can go over to our website, or the link will be below in the show notes where you can download this header as global header and use it on your Divi site as well. And so we’ve got plenty of other content on the channel. We’ve got a few videos about some different headers, we’ve got the one from last year where we build a custom header, we’ve got the Apple style header, and there’s a lot of other things that you can find right here on the channel that are going to take Divi to a whole different level. So if you liked them, please make sure to give this a thumbs up subscribe to the channel and let me get you to this next video. All about the APA style Divi header