This tutorial explains how to create a custom menu and use it to replace the main navigation within the Divi Theme for WordPress.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Text Version Of This Divi Tutorial

______________________________________________________________________________________________________________________ Hello, this is Jimi Blevins. Today I’m going to walk you through: “Creating A Custom Menu For The Divi Theme.” I just want to show you, what I’m encountering is, as I build these tutorials you look at the website and you can see that the menu at the top has gotten kind of jumbled. It’s breaking the layout. So, here’s how you fix that. HowToReplaceTheMainNavigationMenu I’m going to come into my “Dashboard,” go to “Appearance,” and then select “Menus.” This will allow me to build a menu in the style and the form that I want to have at the head of my website. HowToReplaceTheMainNavigationMenu2 So, first, off we need to just give our new menu a “Name.” I’m going to call it “Main Nav,” and click on “Create Menu.HowToReplaceTheMainNavigationMenu3 The simplest way to do this is, we take our links, “Divi Builder” and we’ll “Add To Menu.” HowToReplaceTheMainNavigationMenu4

That’s going to move these links over to the right side and put them in these boxes that we can customize.

Now, I also want to “Create” a “Custom” menu called “Divi Visual Builder,” to separate out the tutorials I do with the Divi page builder. I don’t necessarily want to have a link for this one, I’m just going to put a hashtag in it so it is still a functional URL, however, it won’t go anywhere. HowToReplaceTheMainNavigationMenu6 So, I’ll come back up here to “Pages,” click on all these Divi Visual Builder tutorials, let’s “Add To Menu,” and I want these to be “Drop-down Menus” under the main “Divi Visual Builder” heading. HowToReplaceTheMainNavigationMenu7 All I need to do is just move them to the side a little bit so you can see that they’re indented. I don’t need it to say “Visual Builder” on each one, so I can come in here to “Navigation Label” and I can customize the name of the link. Now, this isn’t going to change the title of the page or change anything else anywhere on WordPress, all this is going to do is change the name of the link as it shows up in the menu. HowToReplaceTheMainNavigationMenu8   The last thing I need to do to get this menu to work properly is, I want to place it as the “Primary Menu” in my theme. Once I hit “Save Menu,” it’s going to save it and it’s automatically popped into the top of the website. HowToReplaceTheMainNavigationMenu9 Go ahead and refresh the page and then we’ll be able to see that there’s my navigation. HowToReplaceTheMainNavigationMenu10 You can see that my “Visual Builder” now has a drop-down menu for easier navigation. There you go, that’s a quick tutorial on: “How To Do A Custom Menu In WordPress, and With The Divi Theme.” Once again, I’m Jimi Blevins, thank you so much for watching.