Sometimes, you may need to display various menu items depending on the device used to browse your website. Fortunately, accomplishing this is straightforward using Divi's built-in Visibility options.
Let's imagine we want to create three distinct menu versions for three different screen sizes:
Desktop screen.
Tablet screen.
Phone screen.
Adding Menu modules for different screen sizes.
Here's a step-by-step guide to implementing these changes and achieving different menu versions for various screen sizes:
Step 1: Add three Divi Menu modules to your Divi Builder layout.
Step 2: Configure each menu module to correspond to a specific screen size:
For Desktop Screens:
Open the first Divi Menu module settings.
Go to the Content tab > Menu.
Select the Menu you wish to display on Desktop screens.
For Tablet Screens:
Open the second Divi Menu module settings.
Navigate to the Content tab > Menu.
Choose the Menu intended for Tablet screens.
For Phone Screens:
Open the third Divi Menu module settings.
Access the Content tab > Menu.
Specify the Menu designed for Phone screens.
Step 3: Manage the visibility settings for each menu module to make sure they display on the correct screens:
For Desktop Screens:
While in the first Divi Menu module, go to the Advanced tab.
Under Visibility options, select the option to disable this Menu module on Tablet and Phone screens.
For Tablet Screens:
In the second Divi Menu module settings, go to the Advanced tab.
Under Visibility group options, choose to disable this Menu module on Desktop and Phone screens.
For Phone Screens:
In the third Divi Menu module settings, go to the Advanced tab.
Under Visibility group options, opt to disable this Menu module on Desktop and Tablet screens.
By following the above steps, you'll have successfully configured different menu versions for Desktop, Tablet, and Phone screens, ensuring a seamless user experience across various devices.