How To Show A Different Divi Navigation Menu On Desktop Tablet And Phone Tutorial by Pee Aye Creative

How To Show A Different Divi Navigation Menu On Desktop, Tablet, And Phone

Nelson Miller Pee Aye Creative
In this tutorial I will show you how to show a different WordPress navigation menu for Desktop, Tablet, and Phone devices in Divi.

Join the Divi crowd!

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.

using visibility conditions to show a different menu per device in Divi

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.

How To Show Or Hide Different Divi Menu Items On Each Device Tutorial By Pee Aye Creative

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

responsive menu selection in the Divi Menu module with the Divi Responsive Helper plugin

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!

Divi Responsive Helper by Pee Aye Creative 2.3

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart