Hide Secondary Menu Items in Mobile Menu

This post may contain referral links which may earn a commission for this site

The Divi Theme allows you to set a primary menu in the main header and a secondary menu in the top header. If you view your site on mobile you may notice that the menu items from both menus are displayed within the same mobile menu. If you don't want this behavior, here's how to exclude the secondary menu items from the mobile menu.

The aim

Say you have a primary and secondary menu on your site, like so:

Then your mobile menu will look something like the image on the left (below). We want remove the links from the secondary header (all the "Secondary Link" ones), to get the cleaned up menu shown on the right:

Before: Secondary menu items shown in submenu

After: Secondary menu items hidden in submenu

Hide Secondary Menu Items in Mobile Menu using Divi Booster

Divi Booster includes an option to exclude the secondary menu items from the mobile menu. You will find it at:

Divi > Divi Booster > Header > Mobile Header > Hide secondary menu items in mobile menu

Hide Secondary Menu Items in Mobile Menu using CSS

To exclude the secondary nav items from the mobile menu, you can use the following bit of CSS:

This works by detecting whether the items have an id (since the secondary menu items aren't assigned an id by Divi, while the primary menu items are).

Hundreds of new features for Divi
in one easy-to-use plugin

30 Comments

  1. I found that as the secondary menu items in question on my site have IDs, this code did not work for me, however using:

    #mobile_menu.et_mobile_menu .menu-item-### {
    display: none !important;
    }

    This removed the item from my drop down menu! 🙂

    Thanks as always for providing awesome code snippets

    Reply
    • Hey Lana, I'm glad you were able to remove the items. I just checked and the code in the post still works with the latest version of Divi. I also tested against the site you linked in the comment and was able to get it to work, so I suspect there might have been some problem in how / where it was added. If you ever want to use it again in the future and have problems with it, just let me know and I'll take a look. Thanks!

      Reply
  2. Unfortunately, this didn't work for me either. Rather than taking the whole menu away it simply broke the css so I have removed again and am looking for other options! Thanks though 🙂

    Reply
  3. I could not get this code to work for me. It takes the entire menu away including the main menu. Any advice?

    Reply
    • Hey Ryan, do you have a link to the site you're trying to use this on? I checked the site linked in your comment, but currently there is no secondary menu there and if I test the code on it, it doesn't affect the main menu. Or am I missing something… Thanks!

      Reply

Submit a Comment

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