How to create a pure CSS hamburger menu icon?

A reliable CSS-only hamburger uses <input type="checkbox"> paired with a to control menu visibility via :checked sibling selectors; bars are drawn with pseudo-elements on the label, styled responsively using em/rem, and animated with proper transform-origin and transitions.

What HTML structure works reliably for a CSS-only hamburger

A minimal, accessible structure is key—no JavaScript means the toggle state must rely on <input type="checkbox">. The checkbox controls visibility via sibling combinators, and its label becomes the clickable icon. Avoid <div>-only approaches: they’re not keyboard-focusable or screen-reader friendly without ARIA.<ul> <li>Use <code><input id="menu-toggle" type="checkbox"> <label for="menu-toggle"></label> pairing

How to draw three responsive bars with pure CSS

You don’t need extra <span></span> elements if you use pseudo-elements. Each bar is a ::before or ::after on the <label></label>, layered with position: absolute and controlled by transform for animation.

• Base label: set display: block, fixed width and height, relative positioning
• First bar: label::before, centered vertically, full width, height ~2px
• Second bar: main label content (e.g., empty <span></span> or just background), same size
• Third bar: label::after, same as first but offset down
• For responsiveness: use em or rem units, and scale all dimensions together in a media query

Why :checked sibling selectors are safer than :focus or :hover

:checked gives you a persistent, script-free toggle state — essential for mobile menus that stay open until explicitly closed. Relying on :focus breaks when users click elsewhere; :hover fails entirely on touch devices.

• Target menu content with #menu-toggle:checked ~ .nav-menu (note the general sibling ~)
• Avoid adjacent sibling unless the menu is *immediately* after the input — fragile in real layouts
• If your menu is deeper in the DOM, you’ll need JavaScript — pure CSS can’t traverse up or across unrelated branches

Common visual bugs and how to fix them

The most frequent issues aren’t about drawing bars — they’re about stacking context, transform origins, and timing mismatches during animation.

• Bars disappear during rotation: set transform-origin: center on each pseudo-element, not default top left
• Animation jumps or skips: declare transition on the base label *and* its pseudo-elements — don’t rely only on the label’s transition to cover them
• Icon misaligned on iOS Safari: add -webkit-appearance: none to the <input> and force hardware acceleration with transform: translateZ(0) on the label
• Click area too small: expand the label’s padding or use ::before to create invisible hit area — never shrink the checkbox itself

CSS hamburger icons work cleanly only when the toggle state, layout, and animation layers are all aligned — it’s less about “drawing three lines” and more about keeping the checkbox’s :checked signal connected to every visual and structural change.