The Divi theme makes it easy to create a beautiful and functional menu for your website. You can use the default Divi menu, or you can create a custom menu from scratch using the Theme Builder and the Divi menu module.
In this blog post, we’ll show you how to create a Divi menu using both methods. We’ll start by showing you how to use the default Divi menu. Then, we’ll show you how to create a custom menu from scratch using the Theme Builder and the Divi menu module.
We’ll also provide some tips for customizing the appearance of your menu and link to a few of the best tutorials that can help enhance your menu.
Quick links:
- The default Divi menu Vs. the Theme Builder menu
- Option 1 – Use the default Divi menu
- Option 2 – Building a menu with the Theme Builder and Menu module
- Additional tutorials for styling and adding functionality to your Divi menu
Choosing the default Divi menu Vs. the Theme Builder menu
Divi has a solid built-in menu that is activated by default when you install Divi. The Divi Theme Builder allows you to create your menu from scratch using the Divi menu module and any of the standard Divi modules. Once assigned as a Divi global header in the Theme Builder it will override the default menu sitewide.
The main difference between using the default Divi menu and building one in the Divi Theme Builder is the level of customization you have and where the menu is displayed. The default Divi menu is a good option if you want a simple, easy-to-use menu. However, if you want more control over the appearance and functionality of your menu, you’ll need to build one in the Theme Builder. The Theme Builder also allows you to place different headers on different pages.
- If you’re not familiar with the Divi Builder, you might want to start with the default Divi menu. It’s a good way to get familiar with the different elements of a menu and how they work.
- If you want a completely custom menu, you’ll need to build one in the Theme Builder. This gives you complete control over the appearance and functionality of your menu.
- If you need to create a menu for a specific page or section of your website, you can use the Divi Builder. This gives you more flexibility than the default Divi menu as it can be assigned to any page or post.
Ultimately, the best way to create a Divi menu is the way that gives you the most control and flexibility. If you’re not sure which method is right for you, I recommend starting with the default Divi menu and then moving on to the Theme Builder if you need more control.
Option 1 – use the default Divi menu on your website
A Divi website will use the built-in Divi menu by default which shows the default Divi logo and any pages you have created in the WordPress menu area. There is also a default secondary Divi menu that can hold more navigation links you have created in the WordPress menu area, contact details, and social media icon links.
There are several customizations you can make to the default header area but the two that are most obvious would be to add your logo and set up your navigation structure.
Set up your menu in the WordPress menu dashboard
By default, the pages you add to your website will be included in the header navigation but to be able to re-order them and create drop-down menus and Divi mega menus you will need to add your pages to the WordPress Menu dashboard and manage them there. Doing this is advised whatever header method you are using.
How to Create a Menu in WordPress
- Log in to your WordPress dashboard and select the Appearance tab.
- Select the Menus option from the menu on the left.
- Give your new menu a name such as Divi primary menu and click on the Create Menu button.
- From the Add menu items area on the left, you can add pages, posts, custom links, or categories to your menu. The items you add will appear in the Menu Structure area.
- To organize your menu, you can drag and drop menu items to re-order them or create dropdown menus by dragging them slightly to the left of a parent menu item.
- Once you have added and arranged your menu items, you need to select the location where you want the menu to appear on your site from the Manage Locations tab. In Divi, you can select from the Primary menu, Secondary menu, and Footer menu.
- Click on the Save Menu button to save your changes and your WordPress menu items will now be reflected in your main Divi menu on the front-end.
Your WordPress menu will now be set up and used in your default Divi menu. You can add, remove, or rearrange your menu items via the WordPress Menu dashboard at any time.
Add your logo to your menu in the Dvi Theme options area
You can now add your logo image to Divi in the Divi Theme options area in your WordPress dashboard.
- In your WordPress dashboard menu click on Divi > Theme Options
- In the Theme Options > General > General tab right at the top, you will see the Logo field
- Click on the Upload Image button to select and upload your logo image into your media library
- Click on Set As Logo and your logo URL will be added to the option field
- Clicking the Reset button will remove your logo and replace it with the default Divi logo
Divi Theme Customizer menu options
Now that you’ve added your logo and menu items to your website, you can take a look at the other customization options available for your default Divi header menu.
These customization options can be found in the Theme Customizer. To access the Theme Customizer, click on your website’s name in the WordPress menu bar, then navigate to Appearance > Customize.
Once you’re in the Theme Customizer, click on the Header & Navigation tab. This will bring up a number of options for customizing your header menu, including:
- Header Format: You can choose from a variety of header formats, including a Default, Centered, Centered Inline Logo, Slide In, or Fullscreen menu style.
- Header Elements: You can add or remove header elements, such as social media icons, the search box, a phone number, and an email address.
- Basic Header Design: You can control the basic header design, such as the fonts, the colors, and the spacing.
The possibilities are endless! Experiment with different customization options to find the perfect look for your Divi header menu.
How to choose a menu format
There are five built-in Divi navigation menu styles to choose from. You can choose between Default, Centered, Centered Inline Logo, Slide In, or Fullscreen.
The default option aligns your logo on the left and the menu on the right, the centered option places the logo above the menu, and the inline option places the logo in the center of your menu. The slide-in menu slides in from the right of the screen when the hamburger menu icon is clicked and the full-screen option uses a full-page overlay to display the menu.
You can also use the checkboxes to Enable Vertical Navigation and/or Hide Navigation Until Scroll. The vertical navigation option will stack your navigation and logo vertically on the left-hand side of the page. The hide navigation option removes the header until the user scrolls down the page and is great for full-screen images.
How to add or remove menu header elements
The header elements tab allows you to show or hide social media icons, the search box, a phone number, and an email address. The phone number, social media icons, and email will be displayed in the secondary menu which is a smaller menu bar that sits above the primary menu. You can also choose to assign another menu with links here via the WordPress dashboard menu tab.
How to customize menu colors & fonts
The Theme Customizer also allows you to customize the primary and secondary menu bars’ fonts and colors. You can set the font, size, and color along with the menu background colors.
The default menu is clean and simple but as you can see above there are limited styling options and using this header may make your website look too divi!
If you need much more control over how your header & menu looks then you will want to start using the Divi Theme Builder.
Option 2. Add a custom Divi menu using the Theme Builder
The Divi Theme Builder allows us to build a global menu template that is applied to all pages across our website or any specific pages or posts you choose.
Once activated it replaces the Default Divi menu completely across your website or where selected.
We can build the header menu within the Divi Theme Builder area using any of the Divi modules just like we would build a page. You are free to add as many sections rows, and modules as are required in your header.
The Divi Menu module is a key part of the header template and just like the default Divi menu above, the Divi menu module uses the menu structure that you set up in the WordPress dashboard.
The steps required to add a custom global Divi menu in the Theme Builder are as follows;
- Open the Divi Theme Builder dashboard at Divi > Theme Builder
- In the Default Website Template click on the Add Global Header button. You can then choose to use either a pre-built header layout you have imported into the Divi library or create your own custom layout from scratch using Divi modules. Click on the Build Global Header to open the Theme Builder page with the Divi Builder.
- You will need to create the structure for your Divi menu so click on the green + icon to add a new row.
- The Insert Module window will now show and you can find the Menu module and click on the icon to add a Divi menu module to the row. You can use the search box at the top of the window to find the Menu module a bit faster too.
- Your menu will now display in the Visual Builder and will update as you make changes to the Menu module settings. The first option in the Menu module Content Settings is where you set the menu the module will use. These menus are those that have been added via the WordPress menu dashboard. You can see how to do this above in the section titled “Set up your menu in the WordPress menu dashboard”. Select the menu you want to use from the dropdown and it will display in the Visual Builder on the page.
- The next step is to add a logo to your Menu module. This option is in the Content Settings and you can upload a logo or select one from your Media Library just as you would with any image on your website. The ideal image size for your Divi logo is 93 pixels x 43 pixels.
- The next option allows you to show or hide menu elements for the search icon and shopping cart if you are using WooCommerce. Use the switches to turn the elements for your menu on or off as required.
- In the Design Settings tab, you can set the layout by choosing the menu style and dropdown menu direction. You can choose the menu to be left aligned, centered, or inline centered logo.
- The rest of the menu options are very much as you see in the other Divi modules so you can further customize the text, colors, spacing, and various other aspects required. Once you have added and customized your menu in the Divi Theme Builder you can click the “Save & Exit” button to save your changes and publish the menu on your website.
- Open the Divi Theme Builder dashboard at Divi > Theme Builder
Further customizing your Divi menu
There are endless possibilities for customizing your Divi menu and header and for many the settings and options found within the Divi menu module will be more than enough. But for those of you who like to customize your menu more, we have a few tutorials that may help.
This tutorial will show you “How to make a Divi transparent header” using the Theme Builder and using the default Divi menu. This is a very popular look for website menus, especially one where the menu is only transparent prior to page scroll.
If you have a lot of menu items you may want to consider a mega menu. This tutorial and guide will show you “How to add a Divi mega menu” either by using the built-in Divi mega menu functionality or via a 3rd party mega menu plugin.
Another popular option for a menu is to “Make your Divi header sticky or fixed” A fixed header will be fixed to the top of the screen at all times and a sticky header will start with content above it and will stick to the top of the screen as the user scrolls down the page.
If you are still looking for even more ways to learn about customizing your Divi menu and header then this round-up post from Elegant Themes is a good place to learn 30+ Helpful Divi Header Tutorials for Divi.
Conclusion
This website uses the default Divi menu which works well for our requirements, but by opting to use the Divi Theme Builder to create your own custom Divi menu you can have full control over how your menu looks and works.
Do you have a cool Divi menu example you want to share? Drop a comment and URL below.
