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:

#mobile_menu li:not([id]) { 
	display:none !important; 
}

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).

Note that there are some situations in which this code won't work, for example, if you are displaying the same menu in both the primary and secondary headers. In that case, try the PHP solution below.

Hide Secondary Menu Items in Mobile Menu using PHP

The CSS code above uses a quirk of Divi – that secondary menu items aren't given IDs – to perform the hiding. A more reliable way is to use PHP to first add a class to the items to explicitly mark them with the menu they are from, like so:

add_filter('wp_nav_menu_objects', 'db105_add_location_class_to_menu', 10, 2);

if (!function_exists('db105_add_location_class_to_menu')) {
	function db105_add_location_class_to_menu($menu_items, $args) {
		if (is_array($menu_items)) {
			foreach($menu_items as $item) {
				if (isset($args->theme_location) && isset($item->classes) && is_array($item->classes)) {
					$item->classes[] = 'dbdb_'.$args->theme_location;
				}
			}
		}
		return $menu_items;
	}
}
You can now use the following CSS to hide the secondary menu items:
#mobile_menu li.dbdb_secondary-menu { 
	display:none !important; 
}

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

36 Comments

  1. Thank you so much! The php option worked wonderfully.

    Reply
    • Great! Thanks, Ryan 🙂

      Reply
  2. The "Hide Secondary Menu Items in Mobile Menu using CSS"(without php's) work for me.
    But when you add this in theme's CSS, It will vanished both Primary and Secondary menus lol.
    It will be like that until you hit the publish button and refresh it.
    Now Primary is shown and Secondary is hidden.

    Reply
    • Hey Pitch, that's interesting. I'm not sure exactly what's going on there, but I'm glad it worked for you. If you happen to be able to share a link to the site you're working on, I'd love to take a look – but no worries if not. Thanks!

      Reply
  3. Hey! this code isn't working for me. by using this code my whole menu got vanished, primary menu too.

    Reply
    • Hi Nikita, I can't tell if this is the cause of the issue for (as your linked site isn't currently showing a secondary header). But one thing I've seen cause this in the past is when the same menu is assigned to both the primary and secondary menu, as Divi produces different HTML for the menu in that case. I have already addressed this case in Divi Booster, and have just added the code it uses to the post above. If you try the solution given in the new "Hide Secondary Menu Items in Mobile Menu using PHP" hopefully that will work for you. If not, let me know. Thanks!

      Reply
  4. 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
  5. 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
  6. 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 *