How To Display and/or Hide Menu Items On Desktop Or Mobile Devices

There are situations where you may want to have a different menu item on a specific device size. Below it's how to manage that by displaying and/or hiding the menu items based on the device screen size.

The first step is to add some CSS snippet in your Theme Theme Options > Custom CSS. It's is highly recommended to use a child theme or and CSS plugin.

Below is the snippet code. Paste the code in your Theme Theme Options > Custom CSS or your CSS plugin.

/* 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;
    }
}

Once added, you just need to add the CSS class below on the menu item that you want to hide on Tablets and Phones (less than 980px) or adjust accordingly:

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.

Use different menu items for different device sizes