Missing Mobile Navigation

A desktop site squeezed onto a phone screen like a sardine can. Your visitors deserve a proper mobile nav, not a horizontal scroll of pain.

What is this?

Imagine taking your desktop monitor, shrinking it to the size of a phone, and calling it "mobile-friendly." That is what happens when your site has no mobile navigation. Your visitors get a horizontal row of links that either overflow off-screen, wrap into an unreadable mess, or shrink to microscopic text. A proper mobile navigation (usually a hamburger menu) reorganizes your links into a format that actually works on small screens.

Why it matters

For your visitors: Navigation is how people move through your site. If they cannot find or use your nav on mobile, they cannot find anything. They end up scrolling aimlessly, tapping wrong links because everything is too small, or just leaving. Over 60% of web traffic is mobile — this is not an edge case, this is the majority of your audience.
For your business: If your mobile visitors cannot navigate, they cannot convert. They cannot find your pricing page, your signup form, or your product pages. A broken mobile nav is not a cosmetic issue — it is a revenue issue.
The standard: Mobile navigation should collapse into an accessible, tap-friendly menu (hamburger icon, bottom nav bar, or slide-out drawer). Menu items should be at least 44x44px tap targets. The menu should be reachable with one thumb.

Responsive mobile menu

<!-- Hidden on mobile, shown as hamburger trigger -->
<nav>
  <button class="menu-toggle" aria-label="Open menu">
    <svg><!-- hamburger icon --></svg>
  </button>
  <ul class="nav-links">
    <li><a href="/">Home</a></li>
    <li><a href="/pricing">Pricing</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

Desktop nav on mobile

<!-- Same nav on all screens — overflows on mobile -->
<nav>
  <a href="/">Home</a>
  <a href="/features">Features</a>
  <a href="/pricing">Pricing</a>
  <a href="/docs">Docs</a>
  <a href="/blog">Blog</a>
  <a href="/about">About</a>
  <a href="/contact">Contact</a>
  <a href="/login">Login</a>
</nav>

How to fix it

React / Next.js

Build a responsive nav that shows a hamburger menu on small screens.

"use client";
import { useState } from "react";
import { Menu, X } from "lucide-react";

const links = [
  { href: "/", label: "Home" },
  { href: "/pricing", label: "Pricing" },
  { href: "/about", label: "About" },
  { href: "/contact", label: "Contact" },
];

function Navigation() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="relative">
      {/* Desktop nav — hidden on mobile */}
      <ul className="hidden gap-6 md:flex">
        {links.map((link) => (
          <li key={link.href}>
            <a href={link.href} className="text-sm hover:text-primary">
              {link.label}
            </a>
          </li>
        ))}
      </ul>

      {/* Mobile hamburger — hidden on desktop */}
      <button
        className="md:hidden"
        onClick={() => setIsOpen(!isOpen)}
        aria-label={isOpen ? "Close menu" : "Open menu"}
        aria-expanded={isOpen}
      >
        {isOpen ? <X size={24} /> : <Menu size={24} />}
      </button>

      {/* Mobile menu panel */}
      {isOpen && (
        <ul className="absolute left-0 right-0 top-full flex flex-col gap-2 bg-neutral-900 p-4 md:hidden">
          {links.map((link) => (
            <li key={link.href}>
              <a
                href={link.href}
                className="block px-4 py-3 text-lg hover:bg-neutral-800"
                onClick={() => setIsOpen(false)}
              >
                {link.label}
              </a>
            </li>
          ))}
        </ul>
      )}
    </nav>
  );
}

Plain HTML

Use a checkbox hack or minimal JavaScript to toggle mobile navigation.

<nav class="site-nav">
  <button
    class="menu-btn"
    onclick="this.parentElement.classList.toggle('open')"
    aria-label="Toggle menu"
  >
    &#9776; Menu
  </button>
  <ul class="nav-list">
    <li><a href="/">Home</a></li>
    <li><a href="/pricing">Pricing</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<style>
  .nav-list {
    display: none;
  }
  .site-nav.open .nav-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
  }
  .nav-list a {
    display: block;
    padding: 12px 16px;
    font-size: 1.125rem;
  }
  .menu-btn {
    display: block;
  }

  @media (min-width: 768px) {
    .menu-btn {
      display: none;
    }
    .nav-list {
      display: flex;
      flex-direction: row;
      gap: 1.5rem;
    }
  }
</style>

High impact — mobile~2 paws

No mobile nav means no mobile usability. The cat has seen visitors rage-quit sites because they could not find the menu. This is non-negotiable.

How the cat scores this

The scanner checks your page at mobile viewport sizes (375px and 390px widths) and looks for a collapsible navigation pattern — a hamburger button, a slide-out drawer, or a bottom nav bar. It flags pages where the desktop navigation is simply shrunk to fit, causing horizontal overflow or text wrapping. It also checks that the mobile menu trigger has proper ARIA attributes (aria-label, aria-expanded) for accessibility.