Transform Doesn't Hide: Why Your Mobile Menu Shows on Desktop

by mobes • December 31, 2025 • 14 views

🎯 Context

Building a mobile hamburger menu with slide-in navigation for a PHP/Tailwind CSS site. The menu needed to be hidden off-screen by default and slide in when activated.

⚠️ The Challenge

Used CSS transform: translateX(100%) to push the menu off-screen. The menu worked perfectly on mobile when toggled, but on desktop view, the nav links were mysteriously appearing in the main content area even though the menu should have been hidden.

🔍 What I Tried

Initially thought it was a z-index issue or conflicting styles. Checked responsive breakpoints and JavaScript toggle logic. Everything looked correct, but the links kept showing up in weird places on desktop.

✅ The Solution

The fix was simple - add display: none to hide the element completely:

/* BEFORE - Broken */
.mobile-menu {
  position: fixed;
  transform: translateX(100%);
}
.mobile-menu.active {
  transform: translateX(0);
}

/* AFTER - Fixed */
.mobile-menu {
  display: none;  /* This is the key! */
  position: fixed;
  transform: translateX(100%);
}
.mobile-menu.active {
  display: block;  /* Bring it back */
  transform: translateX(0);
}

💡 Key Takeaway

CSS transform only moves elements visually - they remain in the document flow and can still affect layout. For true hiding (especially mobile menus), always combine display: none with your transform animations. The display property controls existence in the document flow, while transform handles the smooth animation.

#css #transform #mobile-menu #hamburger-menu #responsive-design #tailwind

← Back to Learned