This tutorial will show you how to customize your primary menu using WordPress & Divi. I go through all the options you have to choose from and explain how to make it look just how you want it.
Text Version of the Divi WordPress Tutorial
Hey, everybody, this is Jimi Blevins.
I’m going to do another tutorial today about menus.
There are lots of things we can do in the customizer of WordPress to get our menus looking exactly how we want them.
First off I’m here in my dashboard, and I’m going to go to “Appearance,” and then “Customize.”
Next, we’ll click on “Header Navigation,” and then we want to click on “Primary Menu Bar.”
We’re going to be customizing the top menu here.
That gives us a bunch of options to mess with. We can make this full width, what that’s going to do is kind of bump the menu out of the constraints of edges of the website. Before that, I want to do some colorizing.
Here is where I’ll start:
We’ve got our background color, I’m going to switch to straight black so you can see my fancy logo there. Then I’m going to change the text color because we can no longer see it. I’ll change it to white, and then I’m going to bump it up to about 80%. (It’s not fully white, it’s a little bit gray, it gives us a good mouse over effect.)
“Active Link Color,” I’m going to go with gold just for giggles.
Then we’ve got our “Drop-Down Menu Background Color,” so you’ll notice that now if I go to the “Drop-Down Menu” it’s got the same color as the top. (I want to make it a little bit lighter than just straight black so there’s a little color variation.)
Then I’ve got this “Dropdown Menu Line Color,” I want to switch that to match the “Active Link Color.”
You can see where the “Drop-Down Menus” come up: you got your nice little bar there, you got the black, you’ve got everything that you need.
So coming back up to here now, “Make Full Width,” I can show you what this does.
What this is going do is just push those the navigation elements out to the edge of your screen, so they go to the edge of the sides now instead of sticking with your regular content. (If you want your menu to go that way.) You can also hide your logo so that you just have your menu there, I do want to keep it for now.
Let’s go through the other options really quickly.
We got “Menu Height,” and this allows you to increase the height of the menu. This also increases the size of the logo. Let’s pump it up to about 85, 85 will be perfect. Our “Max Logo Height,” I want to bump that down to 42. We’ve got plenty of space there.
We’ve got “Text Size,” I want to bump this up just a little bit to 16. We’ve got “Letter Spacing,” which I’m not going to mess with. (This will increase of course the letter spacing between the words. If you had a really simple menu with just a couple items and you wanted to space out the letters a little bit for effect, that’s where you would do it.)
Then we come down to the “Font Choices.” There are a lot of different fonts loaded up to choose from. I don’t necessarily like adding a bunch of fonts to your website because then you’re just creating more system resources being used by the browser. (I usually just stick to default fonts, whatever I set my website to be.) You can go ahead and look through those and choose any that you want if you want to use a different customized font for your “Menu Bar.”
Then we can also change the “Font Styles” here. We can make it bold, italic, put it in all caps, or underline it, really simple stuff.
Alright so now that we’ve kind of got our menu colors where we want it, now we can have some real fun with it.
So we come in here to “Header Format,” we’ve got “Header Style.” Let’s say I want to have a menu that’s centered with my logo, centered on top of my menu, so I change the “Header Style” to “Centered.”
Now I’ve got my logo here, centered above all my menu items.
We can also do, “Centered Inline Logo,” that’s gonna drop the logo right in between your menu items. (Because of the way I’ve got my screen set up, you can see that it pumps the little search icon down here, which is something to take into consideration. I usually turn the search icon off, but again that’s your preference.)
Then we’ve got the “Slide In,” which is a great feature if your website gets a ton of mobile traffic because then your website already looks like it’s responsive and made for mobile.
If you click on this little “hamburger” here, you’ve got your menu coming in from the side. (Which I think looks really attractive. I think that’s looking cool.)
You can also do a “Fullscreen” menu, which has pretty much the same effect. (Again this is kind of like simulating what it would be on a mobile device when I click on this, and then my menu takes up the entire screen.)
So, a lot of different options we’ve got with the navigation.
The last option we get here is, “Hide Navigation Until Scroll.” What this does is: If I click on this my menu bar goes away, but as soon as I start to scroll down it pops back up.
That’s if you’ve got like a nice full page slider that you’ve got on your homepage and you don’t want your menu in front of it. (Kind of like the one-page tutorial I did a couple weeks back, where you actually hid the menu so you didn’t see it until you’ve scrolled into the page.) Right now I’m going to keep this as a “Slide In.”
So you notice that these icons are still this blue color, and the background is this blue color. If I want to change that, I want to come back up here, click back a couple times and we’re gonna go in here to our “General Settings.”
I’m going to go to “Layout Settings,” and you’ve got your “Theme Accent Color.” This is going to be the accent color that’s theme wide. It’s gonna change your link colors, it’s gonna change all the default icon colors and everything. You can set this here.
I’m going to pop that same gold color in the “Theme Accent Color.”
Now that we’re done configuring all of our options for our menu the last thing we need to do is click here on “Save And Publish.” That’s going to save all our changes and they’ll be good to go on our live site.
Just to show you that the changes have taken over to our live site, I’m going to make a new tab here and load the homepage. Anybody looking at this from the front end is going to see our new menus.
So now that everything’s loaded up we can see our new logos here, our new background color’s here, and if I click on this hamburger all of our menu options are there for us in the sidebar.
That pretty much covers everything for: “How To Customize Your Menus Using Divi and WordPress.”
Once again my name is Jimi Blevins and thank you so much for watching.