--- title: "How To Build A Hamburger Menu With CSS (And The No-Code Way In Elementor)" url: https://theplusaddons.com/blog/hamburger-menu-css/ date: 2026-09-28 modified: 2026-09-28 lang: en author: "Sagar Patel" description: "[nexter-builder id=\"118291\"] Two questions posted to the r/elementor community in the last two months sum up why hamburger menus cause so much trouble. In August, one builder wanted a header..." image: https://theplusaddons.com/wp-content/uploads/2026/09/hamburger-menu-css-featured-1024x538.jpg word_count: 2817 --- # How To Build A Hamburger Menu With CSS (And The No-Code Way In Elementor) ## - The guide builds a hamburger menu two ways, with plain HTML and CSS first and a no-code route in Elementor for anyone who would rather not write code. - The CSS-only version uses a hidden checkbox, a label styled as the three-line icon, and the :checked selector to reveal the menu without JavaScript. - The keyboard test in Chromium at 390px shows the button version supports Enter, Space, Escape, and screen reader output as a collapsed or expanded button, while the checkbox version does not. - The accessible button version uses aria-expanded, aria-controls, a visually hidden “Menu” label, and a 44 by 44 touch target to match the stated accessibility goals. - The breakpoint is set by where real links stop fitting on one line, so 767px is only a starting point and headers with six or seven items often need 991px or wider. Table Of Contents Two questions posted to the r/elementor community in the last two months sum up why hamburger menus cause so much trouble. In August, one builder wanted a header that collapsed into a hamburger on small screens instead of wrapping its links onto a second row. In mid-September, another had a hamburger working but could not stop the dropdown from stretching the full width of the screen. Neither problem is about the three lines of the icon. Both are about the menu behind it. This guide builds a hamburger menu two ways with plain HTML and CSS, then tests both in a real browser with a keyboard, because that test changes which version you should ship. After that it covers animating the icon into an X, choosing the breakpoint, fixing the usual layout problems, and the no-code route in Elementor for anyone who would rather not write the code at all. ## The Short Answer A hamburger menu is a ` ` ``` .site-header { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; } .nav-list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; } .menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; /* 44px touch target */ background: none; border: 0; cursor: pointer; } .menu-toggle .bar { display: block; width: 24px; height: 2px; background: #1a1a1a; border-radius: 2px; } .menu-toggle .bar + .bar { margin-top: 6px; } .menu-toggle:focus-visible { outline: 2px solid #6d28d9; outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { .menu-toggle { display: block; } .nav-list { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: #fff; } .nav-list.is-open { display: flex; } .nav-list a { display: block; padding: 1rem 1.5rem; } } ``` ``` const toggle = document.querySelector('.menu-toggle'); const menu = document.getElementById(toggle.getAttribute('aria-controls')); function setOpen(open) { toggle.setAttribute('aria-expanded', String(open)); menu.classList.toggle('is-open', open); } toggle.addEventListener('click', () => { setOpen(toggle.getAttribute('aria-expanded') !== 'true'); }); document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && toggle.getAttribute('aria-expanded') === 'true') { setOpen(false); toggle.focus(); } }); ``` The script does three things: it flips `aria-expanded` and the `is-open` class together so the visual state and the announced state never disagree, it closes the menu on Escape, and it puts focus back on the toggle so keyboard users are not left stranded. Here is the same markup rendered at desktop width and at phone width, closed and open: ![Accessible hamburger menu shown at desktop width with links and at phone width closed and open](https://theplusaddons.com/wp-content/uploads/2026/09/hamburger-menu-css-demo.webp)One header, two widths. The open state shows the toggle turned into an X with its keyboard focus ring visible. ## Animating The Icon Into An X Because the button already carries `aria-expanded`, you can style the open state from that attribute instead of adding another class. The top bar drops and rotates 45 degrees, the middle bar fades out, and the bottom bar rises and rotates the other way. `.menu-toggle .bar { transition: transform .25s ease, opacity .2s ease; } .menu-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Respect users who ask for less motion */ @media (prefers-reduced-motion: reduce) { .menu-toggle .bar { transition: none; } }` The 8px distance is the bar height plus the gap between bars: 2px plus 6px. If you change either value, change the translate distance to match, or the X will be off-centre. Styling from the ARIA attribute also has a useful side effect: if the attribute ever fails to update, the icon will not animate either, so the bug shows up in testing instead of hiding behind a correct-looking icon. The same state-driven approach powers the switches in our guide to [animated toggle switches](https://theplusaddons.com/blog/animated-toggle-switch-css/). ## Choosing The Breakpoint The examples use 767px, the common phone cut-off. That number is a starting point, not a rule. The right breakpoint is the width at which your real links stop fitting on one line, and that depends on how many items you have, how long their labels are and how large the logo is. This is the fix for the "links wrap onto two rows" problem from the introduction. If the menu wraps at 900px, a 767px breakpoint leaves a band of tablet widths where the header looks broken. Drag the browser window slowly from wide to narrow, note the width where the last item drops to a new line, and set the breakpoint a little above it. A header with six or seven items often needs the toggle at 991px or wider, which is also the default switch point in the widget covered later in this guide. | Header content | Typical breakpoint | Why | | -------------- | ------------------ | --- | | Logo plus 3 or 4 short links | 767px | Fits comfortably on tablets | | Logo plus 5 or 6 links | 991px | Tablets in portrait run out of room | | Links plus a search bar and a button | 1024px to 1200px | Extra header items squeeze the menu early | | Long labels or translated menus | Measure it | German or French labels can be much wider | ## Common Hamburger Menu Problems And Fixes **The dropdown stretches the full width of the screen.** In Method 2 the open list is positioned against the header with `left: 0; right: 0`, so it matches the header width. If your header is narrower than the screen, make sure the header itself has `position: relative`. If you want a narrower panel aligned to the toggle, remove `left: 0` and set a width such as `min(20rem, 100vw - 2rem)` instead. **The open menu appears behind page content.** A hero section with its own stacking context, such as a slider or an element using `transform`, can paint on top of the menu. Give the header `position: relative` and a `z-index` higher than the content below it. **The menu stays open after tapping a link.** This happens on one-page sites where links jump to sections on the same page, because nothing reloads. Add one listener that closes the menu whenever a link inside it is clicked: `menu.addEventListener('click', (e) => { if (e.target.closest('a')) setOpen(false); });` **The menu scrolls away with a sticky header.** If the header sticks to the top of the screen, the open menu should too. Keep the list positioned inside the header, as Method 2 does, rather than elsewhere in the page. Our guides to a [sticky header in Elementor](https://theplusaddons.com/blog/sticky-header-in-elementor/) and a [transparent header on scroll](https://theplusaddons.com/blog/elementor-transparent-header-on-scroll/) cover the header side of that setup. **The page scrolls behind a full-screen menu.** When the open menu covers the whole screen, a swipe can scroll the page underneath instead of the menu, which feels broken. Lock page scrolling while the menu is open by adding one line to the `setOpen()` function from Method 2: `document.body.style.overflow = open ? 'hidden' : '';`. The menu itself should get `overflow-y: auto` and a maximum height, such as `max-height: calc(100dvh - 4rem)`, so a long list can still be scrolled inside the panel on short phones. The `dvh` unit follows the visible screen height as mobile browser toolbars appear and disappear, which the older `vh` unit does not. **Submenus are impossible to open on touch screens.** Hover does not exist on a phone. Inside the mobile menu, show submenu items expanded, or give each parent item its own small toggle button that uses the same `aria-expanded` pattern. ## The No-Code Way In Elementor If you build with Elementor, you may not need any of the code above. There are two routes, and which one is available depends on your plugins. ### Elementor Pro's Menu Widgets Elementor Pro includes the WordPress Menu widget, formerly called Nav Menu, and the newer Menu widget for mega menus. According to Elementor's help centre, the WordPress Menu widget has a Breakpoint setting where the mobile dropdown kicks in (Mobile, Tablet or None) and a Toggle Button setting that shows the hamburger icon. The free Elementor plugin does not include a menu widget: its core widget list on GitHub has no navigation menu, so the free route needs an addon. ### Navigation Menu Lite In The Plus Addons For Elementor The free Navigation Menu Lite widget in The Plus Addons for Elementor turns any WordPress menu into a responsive header menu with a built-in hamburger toggle. We checked its settings in the current release on WordPress.org, version 6.5.2. Under the Mobile Menu section of the Content tab you get: - **Responsive Mobile Menu**, a Show or Hide switch that is on by default. - **Open Mobile Menu**, the screen width where the toggle takes over, from 0 to 1500px with a default of 991px. This is the breakpoint from the section above, set with a slider. - **Toggle Alignment**, to place the hamburger left, centre or right. Right is the default. - **Mobile Navigation Alignment**, for the text alignment of the links inside the open menu. - **Menu Content**, with a choice of Normal Menu, which reuses a WordPress menu, or Template Menu, which loads an Elementor template into the mobile panel. It also follows the accessible pattern from Method 2. In the 6.5.2 source, the toggle is rendered as a real `