Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Show Or Hide Different Divi Menu Items Per Device

Nelson Miller Profile Orange
In this tutorial I will show you how to show or hide different WordPress menu navigation items per device in Divi.

▶️ Please watch the video above to get all the exciting details! 👆

Enable CSS Classes In WordPress Navigation Menu Items

The first step is to go to Appearance>Menus from your WordPress Dashboard. Select the menu that you want to edit.

Enable CSS Classes In Screen Options

The key thing here is to make sure CSS Classes is enabled in the Screen Options. At the top of the page, look for the “Screen Options” button, and this opens up some additional options. Find the “CSS Classes” checkbox and select it. Now, inside each menu item will be an additional field for you to add CSS classes. You’ll see what I mean in the screenshots in the next few steps.

Divi menu CSS classes screen options

Add CSS Classes To The WordPress Navigation Menu Items

Now that you have the CSS classes input field enabled, you can add a classes which we will target to hide the menu item. The CSS class is associated with the menu item. So if we target that class, we are targeting that specific menu item.

By default, a WordPress menu item will display on devices. But in Divi, we have three responsive options – Desktop, Tablet, and Phone. These are based on media queries, which we talk about in another tutorial. So what if you want to show or hide some menu items on different devices sizes?

We start with a CSS class. For the sake of this tutorial, we will keep it simple and use three classes, each will hide the menu item on a specific device size.

pa-menu-hide-desktop

pa-menu-hide-tablet

pa-menu-hide-phone

Just copy and past these classes according to which menu items you want to hide per device. You can watch the video to see this in action. Below is a screenshot to help explain this.

show or hide menu items in Divi

Add CSS Snippets To Show Or Hide Navigation Menu Items

Below you will find three CSS snippets, one for each device size in Divi. You can copy and paste them as needed. Just keep in mind that the class needs to be the same as the ones used in the menu item.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

Hide Menu Items On Desktop Device Sizes

/*hide menu items on Desktop device sizes*/

@media all and (min-width: 981px) {
	.pa-menu-hide-desktop {
		display: none;
	}
}

Hide Menu Items On Tablet Device Sizes

/*hide menu items on Tablet device sizes*/

@media all and (min-width: 768px) and (max-width: 980px) {
	.pa-menu-hide-tablet {
		display: none;
	}
}

Hide Menu Items On Desktop Device Sizes

/*hide menu items on Phone device sizes*/

@media all and (max-width: 768px) {
	.pa-menu-hide-phone {
		display: none;
	}
}

You can combine these snippets as needed. Just use whichever snippet you need that targets the class in the menu item. Now, when you view your menu, the items will show or hide according to the designated screen size.

Do It With A Setting!

Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!

Divi Responsive Helper Plugin by Pee Aye Creative

Below is a screenshot of the responsive settings our plugin adds to the WordPress Menu items. As you can see, the checkmarks make it super easy to show or hide items on any device.

show or hide menu items per device with Divi Responsive Helper

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

Comments By Members

These comments are highlighted because they were posted by fans who have a membership on this site.

  1. John Sharkey <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Hi Nelson

    I’m looking to do something similar but slightly different. On the mobile menu (hamburger) version, I have a menu item set to non-clickable using a “#” in the URL, which is desired. The issue is in mobile since there is no mouse pointer, the non-clickable item appears “tappable” and when selected closes the menu. The desired action would be for it NOT to close the hamburger menu. Any way to do this? I would think removing the HREF for this would do it, but can’t figure out how! Thanks, John

    Reply
    • Hemant Gaba

      Hi John!

      Please add the class pa-menu-hide-mobile to the menu item and then add the following code:

      @media all and (max-width: 767px){
      .pa-menu-hide-mobile a{
      pointer-events: none;}
      }

      Let me know if it helps!

      Reply

Comments By Others

  1. Brian Pearl

    Hi there…I know it’s been a couple of years, but this should still work? I’m trying it now and not having any luck hiding a menu item on desktop. Any tips?

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart