Method 1: Duplicate Modules With Visibility Options

One method to show a different menu per device is to duplicate the Menu module or section and hide and show them using visibility options in Divi. To do this, you first need to create the separate menus in WordPress. Go to your WordPress Dashboard>Appearance>Menus and create different menus and needed. You can name them like Desktop Menu and Mobile menu to make it easier to understand.

After that, go to Menu or other section that contains your Menu module and open the module or section settings to the Advanced tab>Visibility toggle. There you will see checkboxes for Desktop, Tablet, and Phone.

For the menu that you only want to show on Desktop, you would select the checkboxes for Phone and Tablet, since the selected options will be hidden. And inversely, if you only want to show a menu on Phone and Tablet, you would select the checkbox for Desktop.

Is this method okay?

While this may seem like a good method to use, I do need to give it a disclaimer. This method is fine for just a menu. But I want to be clear that this is not recommend for other content. I hold to the belief that this method is almost never required. I would never recommend duplicating any section or module just for responsive design reasons, as I believe there are always better methods. Using this method for other types of sections that contain images and text can often get you into trouble with duplicate content, which is bad for SEO. I have seen website pages made entirely of duplicate sections for desktop and mobile, and it is quite a bad practice, so please don’t get into the habit of doing this. I do not endorse it for content or even sections – but for just the menu, it is fine.

Method 2: Show Or Hide menu Items Per Device

If you do not need to rearrange any menu items, but simply want to show or hide a few of the links within the menu per device, then you can use this method.

I actually already have a full tutorial about this method, so I am not going to repeat it here. If this method sounds like what you need, please refer to the other tutorial How To Show Or Hide Different Divi Menu Items On Each Device.

Method 3: Use The Divi Responsive Helper Feature

By now, I think most of my readers are familiar with our plugins, and one of the most popular in the entire Divi world is our Divi Responsive helper plugin. One of the very clever features we have in the plugin is a new option in the existing Divi menu module to choose a different menu for Desktop, Tablet, or Phone.

Without our plugin = no responsive icon/tabs

With our plugin = responsive icon/tabs

I don’t think it can be easier or simpler than that! We hacked the Divi Menu module and added responsive settings to the menu selection dropdown! Now you can choose a completely different navigation menu to show on Desktop, Tablet, and Phone! If you own the plugin, then this is the obvious best method to show a different menu per device in Divi.