Most WordPress Responsive Menu Plugins Suck

I’m a big fan of responsive WordPress themes – ones that have it built in right from the start. In fact, I’d previously written about how we need to stop using separate themes for mobiles, and instead maintain the same code base for all devices. Unfortunately, sometimes our themes don’t give us that luxury and we need to use a plugin or other tool to enable responsive design for elements like menus. WordPress has a large selection of plugins that replace traditional menus, to make them mobile friendly. Unfortunately, they all contain a fatal flaw – bloat.

I thought I was following best practices in 2014 when I purchased a responsive Genesis child theme. No more worrying about separate themes – everything would world just fine forever. Unfortunately, the theme didn’t have responsive menus, and the entire menu would just sort of “shrink” using up more and more vertical space on mobile devices as shown here:

As the screen shrinks, two lines become three. And on small mobile screens, that’s a long time simply to start reading the content!

The Size Problem and Plugin Bloat

In 2016, Genesis revamped their framework and came out with new sample themes that had responsive menus built in. But my older child theme was stuck out in the cold, and there was nothing I could do, short of purchasing a new one entirely. But I’d already invested quite a lot of time and effort into my existing theme by then, and I didn’t relish the idea of starting from scratch.

So I did what every WordPress site owner does when saddled with an intractable problem – I turned to plugins. And there were lots of them! So many plugins with great options.

Here are a few names:

1. WP Mobile Menu
2. Responsive Menu
3. WP Responsive Menu
4. Max Mega Menu
5. etc etc

This is a screenshot of my network resources when I use the default menu in WordPress:

It’s nice and compact. 333 KB page size, with 557 KB resources.

But what I didn’t realize at the time, was how badly it would affect my site size and page speed. Here’s a side by side comparison. Here’s the menu I got after I installed the plugin:

Now watch what happens to the page size.

That’s incredible! Both my page size and resources doubled! Along with a healthy 25% bump in the total number of resources requested. I didn’t realize it at the time, but when my site started slowing down, I spent time figuring out what was happening, and discovered the root cause.

No Easy Solution for Responsive Menus

Unfortunately, all the responsive menu plugins are like this. The closest I could get to a lightweight plugin was Awesome Responsive Menu. If I had to use a plugin, it would be this. The footprint is relatively minor. But it doesn’t replace regular menus and has some quirks that require the right configuration to work properly.

My only solution now is to try and code the responsive menu myself. For this, I’m going to have to delve into the new Genesis child themes and see how they manage it. It’s a jarring reminder of how even when you think you’ve done all you can to future proof your site, you can still get burnt.

Reduce Number of Top-Level Menus

One way for me to reduce the impact of menu space is to reduce the number of top-level menu items. Perhaps collapse some menus into the others. Short of that, I’ll keep trying to see how I can make my site’s menus mobile friendly without having to double or triple my footprint!