Sometimes you may want to have a different menu item on a specific device size and in this tutorial, we will learn how to manage that by showing and hiding the menu items based on the device screen size.
The first step is to add this CSS snippet in Divi > Theme Options > Custom CSS:
/* Hide element on Desktop */
@media only screen and (min-width: 981px) {
.hide-on-desktop {
display: none !important;
}
}
/* Hide element on Tablet/Phone */
@media only screen and (max-width: 980px) {
.hide-on-mobile-tablet {
display: none !important;
}
}
Now, you just need to add this CSS class on the menu item that you want to hide on Tablets and Phones (less than 980px):
hide-on-mobile-tablet
And use this CSS class on the menu items that you want to hide on Desktops:
hide-on-desktop
This is where you need to add it to:
NOTE: If the "CSS Classes" field is not visible in your Appearance > Menus screen, open Screen Options (top-right corner) and tick the checkbox to enable it.
