icon divi custom menu

Divi Builder Menú

DOCUMENTATION

Unlimited menus with Divi Builder
Includes 8 templates

featured web

Unlimited Custom Menu

Create and design your Divi menu as you create any other section, using the fantastic Divi Builder.

Description

By default, Divi comes with a wonderful built-in menu options. But, what if you want to build your custom menu with the Divi Builder?

That’s exactly what you can do with Divi Supercustom Menu. Just create a new menu and begin to add anything you want to it.

 

icono ok Do you want to show a video in your menu?

icono ok Do you want to include a login in your menu?

icono ok Do you want to put images in your menu links?

….

Yes!! You can do all of this and anything you imagine with Divi Menu Builder

1 – Installation

Once we have our WordPress installation with Divi working, we have to install the plugin.

1. In your admin dashboard, go to Plugins > Add new.

custom menu 1

2- Click Upload Plugin button, and in the form that appears, select the plugin .zip file and click Install Now.

custom menu 2
3- Once the plugin is installed, activate it clicking Activate Plugin.
custom menu 3

Now you can see that a new Menu option has appeared with the title ‘Divi Menu Builder’.

4- Before start building your menus, go to Divi > Theme Options and in the tab Builder, enable the option Supercustom Menus.

custom menu 4

2- Using Divi Menu Builder

You can use Divi Menu Builder in two different ways:

  1. Using Divi’s default header and its button to open the menu.
  2. Creating your custom button to open your menu.

What option to use?

If you are already using Divi’s default header, like in this example. use option 1. (Continue reading Configure Divi Header and Navigation for Divi Menu Builder).

If you are using a child theme or you have any content in your Global Header in the Divi Theme Builder, like in this example, use option 2. (Continue reading Create your custom button to open Divi Menu Builder.

 2.1- Configure Divi Header and Navigation for Divi Menu Builder.

Now you have to configure Divi Header to open your Menu. To do that go to Appearence > Customize > Header & Navigation.

divi menu builder header options 1

 

Now click the option Header Format and select ‘Fullscreen’ as Header Style.

divi menu builder fullscreen option 2

After this, your custom menu will be prompt with the default Divi’s hambuguer menu icon. Now you can continue reading 3- Creating your menu.

Can’t you see the Header & Navigation option?

If you can’t see the Header & Navigation option like in the previous image, you won’t be able to activate the ‘Fullscreen menu’. That is because you already have a Global header created in your Divi Theme Builder. If this is your case, you will have to use option 2 and create your own Menu Trigger button. Read Create your custom button to open Divi Menu Builder.

custom menu 12

2.2- Create your custom button to open Divi Menu Builder

If you are using a custom Globla Header in your Divi Theme Builder, you will need to add the button to open your menu.

Once you activate Divi Menu Builder, you will see a new module in the Divi Theme Builder called “Menu Builder Trigger”.

divi menu builder trigger module

 Add this module to create the control that opens your menu. You will be able to customize this control with these options.

divi menu builder trigger module options

  • Type: choose between uploading your own image or use a default hamburguer icon.
  • Image: If you select type image, upload here the image you want to use.
  • Text: Complete with any text you want to display with your icon/image.
  • Text position: Position where you can place your text.

Once you have customized your menu trigger, save your design.

Now everything is ready. You can go to Divi Supercustom Menu > Create menu and creat your amazing menu.

3- Creating your custom menu

To create your custom menu, you have to go to your Admin Panel > Divi Menu Builder > Options. We know that start to create with a white canvas is always difficult, we have created 8 different menu layouts to use as start. Once you choose the one you like the most, click the option “Import exmple” below it, and the Divi Builder will prompt with the content of the example.

divi menu builder import

From here you have to work as you know, with the Divi Builder. You don’t have any restriction and you can add anything you need to your amazing menu.

 

4- Switching your active menu

If you go to Divi Supercustom Menu > View Menus you can see all the menus you have already created. The current active menu will be highlighted with the ‘Active Menu’ bubble. If you want to activate other menu, use the ‘Make active’ row operation in the desired menu.

custom menu 9
You also can do this from the Divi Supercustom Menu Options panel.
custom menu 10

5- Other options.

On the page Admin Panel > Divi Menu Builder > Options you can find some extra options to customize your menu.

  • Close menu color: Pick the color for the ‘X’ icon that closes your menu.
  • Background close menu color: Pick the color fo the background of the icon that closes your menu.

-30% use the cupon SummerSale24

X

Get 5€ Off now!

Register now and get free coupon code.

 Register Now
Select currency
Euro