Different Menu Per Device
Sometimes you may need to show a different Divi navigation menu on mobile that has different menu items or a different order of items than on desktop. You may be wondering the best way to achieve this in Divi, and there are a few options to consider. So in this tutorial, I will show you how to show a different WordPress navigation menu for Desktop, Tablet, and Phone devices in Divi.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
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.
Note that this method is not about showing entirely different WordPress menus, but rather about showing different menu items within one menu.
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.
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
Never mind. I figured out that I need to do it by adding a global header template in Divi and then editing from there. thank you!
I’m glad to hear you figured it out!
I feel like I’m missing something obvious. I have the Divi Responsive Plugin. I see what you mean about the option for making changes in the Divi menu settings module. The thing is, I set up my menu in the Appearance-Menu settings–Primary Menu etc. I see the options that Divi Responsive added in, to show-hide-items are there. But am I supposed to add a menu module to each page and change it? I am missing the step of how you got to the menu settings module and changed the settings there. The only way I can find is to add a menu module to a page and then customize, which I know is the wrong answer. Thank you! And I love your stuff.