Use different menu on mobile

Viewing 1 replies (of 1 total)
  • Oliver Campion

    (@domainsupport)

    2 years, 5 months ago

    Hi,

    This functionality isn’t part of the theme, however, if you do the following you can create one menu with items that are displayed for just desktop or mobile …

    1) Go to “Dashboard – Appearance – Menus” and select the relevant menu to edit
    2) Click “Screen Options” top right and make sure “CSS Classes” is ticked
    3) Expand any menu items you want to only show on mobile and add “hide-on-desktop” to the “CSS Classes” field
    4) Expand any menu items you want to only show on desktop and add “hide-on-mobile” to the “CSS Classes” field
    5) Save the menu
    6) Go to “Customizer – Additional CSS” and add the following …

    @media screen and (min-width: 482px) {
	.hide-on-desktop {
		display: none;
	}
}
@media screen and (max-width: 481px) {
	.hide-on-mobile {
		display: none;
	}
}

    Hope that helps.

    Oliver

Viewing 1 replies (of 1 total)
  • The topic ‘Use different menu on mobile’ is closed to new replies.