Disable Kadence Mega Menus on Mobile

If you aren’t familiar, Kadence is a suite including extra blocks and a powerful theme for WordPress.

One nifty thing you can do with Kadence, if you so choose, is build out one of those trendy mega menus.

Mega menus can be a fun desktop experience but are generally hot garbage on mobile.

You know what’s great on mobile? Simple dropdowns.

If you follow the Kadence docs (linked above) to create a Kadence Element and assign it to a top-level menu item, your mobile experience probably won’t be great. And there is no way to define fallback behavior on mobile. You can disable the Element on mobile using the Element’s display settings and add additional sub items to the top-level menu item, which will work fine on mobile. But on the desktop view, your extra sub items will appear right below your mega menu, which is definitely not the desired effect.

If you’ve decided to go this route, there’s a little bit of CSS that can help you out here.

@media screen and (min-width: 1025px) {
	ul.sub-menu > li.menu-item:has(.kadence-element-wrap) ~ li.menu-item {
		display:none;
	}
}Code language: CSS (css)

What this block of CSS does is simply hide any menu sub items that come after a menu item containing a Kadence Element, which implies it is a mega menu. And it only does this on desktop views. So on desktop, the mega menu is all that appears, and on mobile, you only see the vanilla links in the submenu.

Two caveats:

1. It’s possible that you’ve adjusted your Kadence breakpoints. Tinker with the media query appropriately. The class that handles hiding the Kadence Element on mobile is vs-md-false, so look to that class for the appropriate breakpoint.
2. :has is supported on something like 92% of browsers. Review your project requirements before relying on this. If an unsupported browser visits your site, it will simply look like the screenshot above, so it’s not broken or anything, but it is less-than-perfect.