How to Set Up Your Navigation and Responsive Menu Plugin

NOTE:  The first time you enter the Divi Builder you’ll get a popup with an option to watch a tour. If you’re new to Divi, feel free to watch that tour now, otherwise, continue on.

1. Connect Your Desktop Menus in Divi

In the sidebar, go to Divi > Theme Builder > find the Global Header in bright green and click on the pencil icon to edit.

You should see what looks like two overlapping headers with one at lower transparency in the background. This is because the theme includes two variations of the header: one for Desktop and one for Tablet and Mobile. In order to select the correct header, you’ll want to go into the Wireframe View.

Click the purple circle button at the bottom center of the screen to expand the menu (if it’s not already expanded) > Select the icon on the far left that looks like a rectangle with two squares below it.

Once in the Wireframe View find the section labeled Desktop Header > Open the Menu module on the right by clicking the gear icon.

When the module opens, by default you should see a Menu dropdown box. Click on that and select Main Menu Right. Once selected, click the green checkmark button to Save Changes and exit the module. Hit Save again in the lower right corner of the Global Header Layout page.

Hit the X in the upper right corner to exit out of the layout. Make sure the green button on the Theme Builder page reads “All Changes Saved”. If it doesn’t, make sure to select Save again.

NOTE:  You shouldn’t need to connect the left menu as it should be connected by default.

2. Activate the Responsive Menu plugin and connect your Mobile Menu

In the sidebar, go to Plugins > Installed Plugins > under Responsive Menu select Activate.

In the sidebar, go to Responsive Menu > Menus > select Create New Menu button.

Keep the default, stock theme selected and click Next. In the Name Your Menu field write “Mobile Menu”.

Under Link WordPress Menu, click on the dropdown menu and select Mobile Menu.

Hit the blue Create Menu button to save your selections. This will take you to a design screen but just exit out by clicking on the pink X button.

3. Import Menu Layout for the Responsive Menu plugin

In the sidebar, go to Responsive Menu > Settings > select the Import/Export tab and under Import Menu click Choose File.

Browse to the child theme folder > Demo Files > Plugins > select either the Simple Menu or Expandable Menu .json file based on the menu style you prefer. Included in this folder is a .png preview of each option for reference only. Do not import the png file.

Once selected click the blue Import button. The success message will flash quickly toward the top of the screen.

4. Save Responsive Menu layout as a template

In the sidebar, go to Responsive Menu > Menus > click on the Mobile Menu link. This should open into the design screen that we saw earlier.

Look for the blue buttons at the bottom and select the up arrow. Choose Save As Theme. In the popup, enter a name (either Simple or Expandable, based the .json file you imported in the above step).

Save Theme.

5. Import and Save the other Responsive Menu layout as a template (optional)

If you would like to have both the Simple and Expandable Mobile Menu Templates available to you, just repeat steps 3 and 4 above, selecting the other file.

6. Confirm theme import(s) were successful

In the sidebar, go to Responsive Menu > Themes and check that your new layout is listed. It will appear without a preview image.

✱ Note on using Responsive Menu themes ✱

If you choose to load both options and want to go back and forth between the two, either because you haven’t decided or changed your mind, whatever the reason may be, please note that if you make changes to a theme then switch, CHANGES WILL BE LOST. To avoid this, ALWAYS SAVE YOUR MENU AS A NEW THEME (step 4 above) BEFORE SWITCHING.