Customizing your website's navigation menu to display different items on desktop and mobile devices can significantly improve user experience and streamline navigation.
In this article, we will guide you through the process of hiding specific menu items on either desktop or mobile devices using Divi.
Go to WordPress Dashboard → Appearance → Menus
Click on the Screen Options button at the top right corner
Ensure that the CSS Classes checkbox is checked
Edit the menu item you want to hide, and in the CSS classes field, use one of the following CSS classes:
dt-hide-on-desktop - to hide the menu item on the desktop
dt-hide-on-tablet - to hide the menu item on the tablet
dt-hide-on-phone - to hide the menu item on the phone
Go to WordPress Dashboard → Divi → Theme Options → General Tab → Custom CSS
Copy/Paste the following CSS code:
/* Hide Menu item on Desktop */
@media (min-width: 981px) {
.dt-hide-on-desktop {
display: none !important;
}
}
/* Hide Menu item on Tablet */
@media (min-width: 768px) and (max-width: 980px) {
.dt-hide-on-tablet {
display: none !important;
}
}
/* Hide Menu item on Phone */
@media (max-width: 767px) {
.dt-hide-on-phone {
display: none !important;
}
}
Pro Tip: If you don't want a particular menu item to display on the desktop and the tablet, you can use both of the classes separated by a space: dt-hide-on-desktop dt-hide-on-tablet