Some times a situation occurs that number of menu options are too many to be used comfortably in small screen with hamburger menu. Or, such a situation occurs that client wants to have different options for desktop and different options for mobile.
Let us consider a situation where we have five menu options – Menu 1, Menu 2, Menu 3, Menu 4 & Menu 5. We need Menu 3, Menu 4 & Menu 5 to be displayed in Desktop mode and Menu 1, Menu 2 & Menu 3 to be displayed in Tablet & Smartphone mode.
Resource:
You need Divi & a little CSS.
Procedure:
We shall create two different CSS classes to assign to different menu options as per our requirement.
.no-mobile {
display: none;
}
@media only screen and (min-width: 980px) {
.no-desktop {
display: none !important;
}
}
Class no-mobile is assigned to the menu options that we do not want to be available in Tablets & Smartphones and class no-desktop is assigned to the menu options that we do not want to be available in Desktop.
Now we shall assign these classes to required menu options. Click on Screen Options at top right corner of the screen and click on the check box named CSS Classes (Image 1). Put related CSS class (no-mobile or no-desktop) in relevant menu options (Image 2, Image 3 & Image 4). Menu option with CSS class no-mobile will not be available in Tablets & Smartphones, menu option with CSS class no-desktop will not be available in Desktop and menu option with no CSS class will be available both in Desktop as well as in Tablets & Smartphones.
