• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

Why You Should Use The Hamburger Menu For Mobile Design

Bhagwad Park

Published on: June 30, 2021

Categories: Website Development 0

Website design is full of fads. Color combinations come and go. App design moves from “skeuomorphism” to “flat” design – like the simulation of a page turn in a books application instead of just sliding into the next page. Some of these fads stick around, whereas others fall by the wayside. I feel that the “Hamburger menu” belongs to the former category. And it takes on increased importance now that search engines like Google are making the website experience part of their ranking algorithm.

What is the Hamburger Design?

Here’s an example of a Hamburger menu on the NameHero website.

Hamburger Design on Mobile Sites
Hamburger Design on Mobile Sites

It’s represented by horizontal lines – usually three of them, but as you can see above, the design can vary. On the NameHero site (as of right now), it’s two lines, representing a list of menu items. Clicking this will either create a slide-out menu or show the menu covering the screen entirely.

You’ve probably seen in mobile apps that click the three lines on the top corner slides the menu into view.

Why It’s Good for Mobile Screens

The hamburger-style menu makes sense only for mobile screens because of the lack of screen space. Without a hamburger-like design, you’d have to show the menu with all its elements. And because the width of mobile devices is small, the menu ends up wrapping around to eat more vertical space, thus pushing your main content down. This isn’t a problem on desktop screens that typically have more horizontal space than they know what to do with. But it’s a real issue on mobile screens.

I can speak from personal experience, that this is a problem for my website WP-Tweaks on mobile screens. Here’s a screenshot of how the extra menu space hurts my NameHero review  by pushing it down:

Traditional Menus Take up Too Much Space on Mobile
Traditional Menus Take up Too Much Space on Mobile

I’m trying to work on a solution that doesn’t involve a lot of code, but it looks like I’m going to have to get a new theme. This brings me to my main problem.

Older Themes Suffer Badly

Not surprisingly, older themes have a hard time dealing with this. They were created before mobile screens were everywhere, and so were ill-equipped to deal with the explosion of mobile content. In those days, the biggest design consideration was responsiveness. The idea that you didn’t need a separate theme or subdomain for mobile content, and could make do with just one codebase.

But responsiveness is now a given. No theme worth its salt can afford to not work on smaller screens. And the hamburger menu is now a staple of responsive design. You simply need to have a better way to show menus.

Plugins are the Only Hope for Older Themes – But at a Cost

Changing a theme is a big deal. There are probably several artifacts related to the older theme which need to be updated or rewritten entirely. Also, there should be a good reason to change a theme other than just a menu. If everything else is working great, then it feels like overkill to do all that work just for a simple visual element like a menu.

For WordPress, the answer is obvious – plugins. Unfortunately, these plugins come at a cost – heavy additional code. I’m still in the process of experimenting with different plugins to see which ones can get the job done. I’m also taking a look at manual CSS options, but haven’t reached a firm recommendation yet.

Once I find a good solution, I’ll be sure to post it here on the NameHero blog so that everyone else can benefit from my research!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • WordPress Tutorials
  • Enterprise Hosting
  • WooCommerce
  • Web Hosting
  • Resellers
  • Website Security
  • Website Development
  • Website Performance
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Support
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA