{"id":5077,"date":"2021-12-14T01:00:00","date_gmt":"2021-12-14T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/hamburger-menu-css\/"},"modified":"2026-04-07T22:35:42","modified_gmt":"2026-04-07T20:35:42","slug":"hamburger-menu-css","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css\/","title":{"rendered":"Hamburger Menu CSS (CSS-Only) 10+ Examples + Code"},"content":{"rendered":"\n<p>On today\u2019s menu are CSS hamburgers. A responsive way to display an off-canvas menu using only HTML and CSS.<\/p>\n\n\n\n<p>A CSS hamburger menu is a great way to improve navigation without cluttering a screen. Think of it as the epitome of responsive design but with endless possibilities.<\/p>\n\n\n\n<p>Keep reading to discover hamburger menu examples you can create using CSS, including<em> slide-outs, screen overlays, and cool animations<\/em>. Let\u2019s get started!<\/p>\n\n\n\n<h2 id=\"how-do-you-make-a-hamburger-menu-in-css\" class=\"wp-block-heading\">How do you make a hamburger menu in CSS?<\/h2>\n\n\n\n<p>You can make a hamburger menu in CSS by toggling a hidden checkbox and using the <code>:checked<\/code> selector to show and hide an off-canvas navigation panel.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Add the HTML structure (toggle + nav).<\/li>\n\n\n<li>Style the hamburger icon (three bars).<\/li>\n\n\n<li>Hide the menu by default.<\/li>\n\n\n<li>Reveal it on toggle (<code>:checked<\/code>).<\/li>\n\n\n<li>Animate and add reduced\n\n<h3 class=\"wp-block-heading\" id=\"4.-full-screen-hamburger-menu\">4. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/poWRrQW\" target=\"_blank\" rel=\"noopener nofollow\">Full-screen Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_poWRrQW\" data-src=\"\/\/codepen.io\/anon\/embed\/poWRrQW?height=450&amp;theme-id=1&amp;slug-hash=poWRrQW&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed poWRrQW\" title=\"CodePen Embed poWRrQW\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/poWRrQW\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Considering opening the menu element in full-screen? Then you&#8217;ll love this example. A CSS-only solution to display a burger menu and open it on a full-screen layer.<\/p>\n\n\n\n<p>This kind of full-screen menu can come in handy when our menu has many items, sub-menus, or extra information.<\/p>\n\n\n-motion support.<\/li>\n<\/ul>\n\n\n\n<p>Copy the HTML\/CSS snippet and swap in your nav links.<\/p>\n\n\n\n<h3 id=\"step-1-add-the-html-copypaste\" class=\"wp-block-heading\">Step 1, Add the HTML (copy-paste)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">header<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"site-header\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"brand\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Brand<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">label<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hamburger\"<\/span> <span class=\"hljs-attr\">for<\/span>=<span class=\"hljs-string\">\"nav-toggle\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"sr-only\"<\/span>&gt;<\/span>Open menu<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bar\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bar\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"bar\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">label<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"nav-toggle\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"nav-toggle\"<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"checkbox\"<\/span> \/&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"overlay\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"offcanvas\"<\/span> <span class=\"hljs-attr\">aria-label<\/span>=<span class=\"hljs-string\">\"Primary\"<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Home<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>About<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">a<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\">\"#\"<\/span>&gt;<\/span>Contact<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">a<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">header<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 id=\"step-2-add-the-base-css-layout-hidden-menu\" class=\"wp-block-heading\">Step 2, Add the base CSS (layout + hidden menu)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-pseudo\">:root<\/span>{\n  <span class=\"hljs-attribute\">--header-h<\/span>: <span class=\"hljs-number\">64px<\/span>;\n  <span class=\"hljs-attribute\">--panel-w<\/span>: <span class=\"hljs-built_in\">min<\/span>(<span class=\"hljs-number\">80vw<\/span>, <span class=\"hljs-number\">320px<\/span>);\n  <span class=\"hljs-attribute\">--bar-w<\/span>: <span class=\"hljs-number\">28px<\/span>;\n  <span class=\"hljs-attribute\">--bar-h<\/span>: <span class=\"hljs-number\">3px<\/span>;\n  <span class=\"hljs-attribute\">--bar-gap<\/span>: <span class=\"hljs-number\">6px<\/span>;\n  <span class=\"hljs-attribute\">--dur<\/span>: .<span class=\"hljs-number\">25s<\/span>;\n  <span class=\"hljs-attribute\">--bg<\/span>: <span class=\"hljs-number\">#111<\/span>;\n  <span class=\"hljs-attribute\">--fg<\/span>: <span class=\"hljs-number\">#fff<\/span>;\n}\n\n*{ <span class=\"hljs-attribute\">box-sizing<\/span>: border-box; }\n<span class=\"hljs-selector-tag\">body<\/span>{ <span class=\"hljs-attribute\">margin<\/span>:<span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">font-family<\/span>: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }\n\n<span class=\"hljs-selector-class\">.sr-only<\/span>{\n  <span class=\"hljs-attribute\">position<\/span>:absolute; <span class=\"hljs-attribute\">width<\/span>:<span class=\"hljs-number\">1px<\/span>; <span class=\"hljs-attribute\">height<\/span>:<span class=\"hljs-number\">1px<\/span>; <span class=\"hljs-attribute\">padding<\/span>:<span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">margin<\/span>:-<span class=\"hljs-number\">1px<\/span>;\n  <span class=\"hljs-attribute\">overflow<\/span>:hidden; <span class=\"hljs-attribute\">clip<\/span>:<span class=\"hljs-built_in\">rect<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>); <span class=\"hljs-attribute\">white-space<\/span>:nowrap; <span class=\"hljs-attribute\">border<\/span>:<span class=\"hljs-number\">0<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.site-header<\/span>{\n  <span class=\"hljs-attribute\">position<\/span>: relative;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-built_in\">var<\/span>(--header-h);\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">16px<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>:flex;\n  <span class=\"hljs-attribute\">align-items<\/span>:center;\n  <span class=\"hljs-attribute\">justify-content<\/span>: space-between;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--bg);\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--fg);\n}\n\n<span class=\"hljs-selector-class\">.brand<\/span>{ <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--fg); <span class=\"hljs-attribute\">text-decoration<\/span>: none; <span class=\"hljs-attribute\">font-weight<\/span>: <span class=\"hljs-number\">700<\/span>; }\n\n<span class=\"hljs-selector-class\">.nav-toggle<\/span>{\n  <span class=\"hljs-attribute\">position<\/span>: absolute;\n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">pointer-events<\/span>: none;\n}\n\n<span class=\"hljs-selector-class\">.offcanvas<\/span>{\n  <span class=\"hljs-attribute\">position<\/span>: fixed;\n  <span class=\"hljs-attribute\">top<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">left<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">var<\/span>(--panel-w);\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100<\/span>dvh;\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">80px<\/span> <span class=\"hljs-number\">16px<\/span> <span class=\"hljs-number\">16px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#1b1b1b<\/span>;\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(-<span class=\"hljs-number\">105%<\/span>);\n  <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-built_in\">var<\/span>(--dur) ease;\n  <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1001<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.offcanvas<\/span> <span class=\"hljs-selector-tag\">ul<\/span>{ <span class=\"hljs-attribute\">list-style<\/span>:none; <span class=\"hljs-attribute\">padding<\/span>:<span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">margin<\/span>:<span class=\"hljs-number\">0<\/span>; <span class=\"hljs-attribute\">display<\/span>:grid; <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">12px<\/span>; }\n<span class=\"hljs-selector-class\">.offcanvas<\/span> <span class=\"hljs-selector-tag\">a<\/span>{ <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--fg); <span class=\"hljs-attribute\">text-decoration<\/span>:none; <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">18px<\/span>; }\n\n<span class=\"hljs-selector-class\">.overlay<\/span>{\n  <span class=\"hljs-attribute\">position<\/span>: fixed;\n  <span class=\"hljs-attribute\">inset<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,<span class=\"hljs-number\">0<\/span>,.<span class=\"hljs-number\">45<\/span>);\n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">visibility<\/span>: hidden;\n  <span class=\"hljs-attribute\">transition<\/span>: opacity <span class=\"hljs-built_in\">var<\/span>(--dur) ease, visibility <span class=\"hljs-number\">0s<\/span> linear <span class=\"hljs-built_in\">var<\/span>(--dur);\n  <span class=\"hljs-attribute\">z-index<\/span>: <span class=\"hljs-number\">1000<\/span>;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 id=\"step-3-add-the-toggle-css-checked-selector\" class=\"wp-block-heading\">Step 3, Add the toggle CSS (checked selector)<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.nav-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> ~ <span class=\"hljs-selector-class\">.offcanvas<\/span>{\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateX<\/span>(<span class=\"hljs-number\">0<\/span>);\n}\n\n<span class=\"hljs-selector-class\">.nav-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> ~ <span class=\"hljs-selector-class\">.overlay<\/span>{\n  <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">1<\/span>;\n  <span class=\"hljs-attribute\">visibility<\/span>: visible;\n  <span class=\"hljs-attribute\">transition<\/span>: opacity <span class=\"hljs-built_in\">var<\/span>(--dur) ease;\n}\n\n<span class=\"hljs-comment\">\/* Click overlay to close, by associating it to the checkbox *\/<\/span>\n<span class=\"hljs-selector-class\">.overlay<\/span>{ <span class=\"hljs-attribute\">pointer-events<\/span>: none; }\n<span class=\"hljs-selector-class\">.nav-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> ~ <span class=\"hljs-selector-class\">.overlay<\/span>{ <span class=\"hljs-attribute\">pointer-events<\/span>: auto; }<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 id=\"step-4-add-focus-styles-and-keyboard-support\" class=\"wp-block-heading\">Step 4, Add focus styles and keyboard support<\/h3>\n\n\n\n<p>Accessibility note: the checkbox plus label pattern is CSS-only, but it is not as strong as a real <code>&lt;button&gt;<\/code> that can update <code>aria-expanded<\/code>. Add visible focus styles and consider a &#8220;Menu&#8221; label.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-class\">.hamburger<\/span>{\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">44px<\/span>;\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">44px<\/span>;\n  <span class=\"hljs-attribute\">display<\/span>: grid;\n  <span class=\"hljs-attribute\">place-content<\/span>: center;\n  <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-built_in\">var<\/span>(--bar-gap);\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">10px<\/span>;\n}\n\n<span class=\"hljs-selector-class\">.hamburger<\/span><span class=\"hljs-selector-pseudo\">:focus-visible<\/span>{\n  <span class=\"hljs-attribute\">outline<\/span>: <span class=\"hljs-number\">2px<\/span> solid <span class=\"hljs-number\">#7dd3fc<\/span>;\n  <span class=\"hljs-attribute\">outline-offset<\/span>: <span class=\"hljs-number\">2px<\/span>;\n}\n\n<span class=\"hljs-comment\">\/* Basic 3-bar icon *\/<\/span>\n<span class=\"hljs-selector-class\">.bar<\/span>{\n  <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-built_in\">var<\/span>(--bar-w);\n  <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-built_in\">var<\/span>(--bar-h);\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">var<\/span>(--fg);\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">999px<\/span>;\n  <span class=\"hljs-attribute\">transition<\/span>: transform <span class=\"hljs-built_in\">var<\/span>(--dur) ease, opacity <span class=\"hljs-built_in\">var<\/span>(--dur) ease;\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 id=\"how-do-you-animate-a-css-hamburger-menu-into-an-x\" class=\"wp-block-heading\">How do you animate a CSS hamburger menu into an X?<\/h2>\n\n\n\n<p>Rotate the top and bottom bars and fade the middle bar using <code>transform<\/code>, <code>opacity<\/code>, and <code>transition<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* Turn hamburger into X when open *\/<\/span>\n<span class=\"hljs-selector-class\">.nav-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> ~ <span class=\"hljs-selector-class\">.hamburger<\/span> <span class=\"hljs-selector-class\">.bar<\/span><span class=\"hljs-selector-pseudo\">:nth-child(2)<\/span>{ <span class=\"hljs-attribute\">opacity<\/span>: <span class=\"hljs-number\">0<\/span>; }\n<span class=\"hljs-selector-class\">.nav-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> ~ <span class=\"hljs-selector-class\">.hamburger<\/span> <span class=\"hljs-selector-class\">.bar<\/span><span class=\"hljs-selector-pseudo\">:nth-child(1)<\/span>{\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(calc(var(--bar-gap) + <span class=\"hljs-built_in\">var<\/span>(--bar-h))) <span class=\"hljs-built_in\">rotate<\/span>(<span class=\"hljs-number\">45deg<\/span>);\n}\n<span class=\"hljs-selector-class\">.nav-toggle<\/span><span class=\"hljs-selector-pseudo\">:checked<\/span> ~ <span class=\"hljs-selector-class\">.hamburger<\/span> <span class=\"hljs-selector-class\">.bar<\/span><span class=\"hljs-selector-pseudo\">:nth-child(3)<\/span>{\n  <span class=\"hljs-attribute\">transform<\/span>: <span class=\"hljs-built_in\">translateY<\/span>(calc(-<span class=\"hljs-number\">1<\/span> * (var(--bar-gap) + <span class=\"hljs-built_in\">var<\/span>(--bar-h)))) <span class=\"hljs-built_in\">rotate<\/span>(-<span class=\"hljs-number\">45deg<\/span>);\n}\n\n<span class=\"hljs-comment\">\/* Reduced motion *\/<\/span>\n<span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">prefers-reduced-motion:<\/span> reduce){\n  <span class=\"hljs-selector-class\">.offcanvas<\/span>, <span class=\"hljs-selector-class\">.overlay<\/span>, <span class=\"hljs-selector-class\">.bar<\/span>{ <span class=\"hljs-attribute\">transition<\/span>: none <span class=\"hljs-meta\">!important<\/span>; }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\" id=\"what-is-a-hamburger-menu%3F\">What Is A Hamburger Menu?<\/h2>\n\n\n\n<p><strong>A hamburger menu is a three-line button that toggles a hidden navigation panel, often on small screens.<\/strong> In CSS, it usually means styling the icon and controlling the open state with <code>:checked<\/code>, a class, or an attribute like <code>aria-expanded<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/alvarotrigo.com\/blog\/assets\/imgs\/2021-12-14\/what-is-a-hamburger-menu.jpeg\" alt=\"What is a Hamburger Menu?\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<h2 id=\"what-are-the-pros-and-cons-of-a-hamburger-menu\" class=\"wp-block-heading\">What are the pros and cons of a hamburger menu?<\/h2>\n\n\n\n<h3 id=\"pros\" class=\"wp-block-heading\">Pros<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reduces visual clutter.<\/strong> It condenses navigation options and keeps small headers readable.<\/li>\n\n\n<li><strong>Works well for responsive layouts.<\/strong> A hamburger button helps when your nav does not fit on mobile widths.<\/li>\n\n\n<li><strong>Keeps focus on content.<\/strong> Fewer visible links can reduce distraction on content-heavy pages.<\/li>\n\n\n<li><strong>Familiar pattern.<\/strong> Many users recognize it, especially in mobile apps.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"cons\" class=\"wp-block-heading\">Cons<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Reduced discoverability.<\/strong> Add a &#8220;Menu&#8221; label or show key links on desktop.<\/li>\n\n\n<li><strong>Hidden options.<\/strong> Keep top tasks visible outside the menu.<\/li>\n\n\n<li><strong>Extra interaction.<\/strong> Keep animations quick and add a clear close state.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"how-do-you-make-the-hamburger-menu-responsive\" class=\"wp-block-heading\">How do you make the hamburger menu responsive?<\/h2>\n\n\n\n<p>Show the hamburger on small screens and switch to a horizontal nav when links stop fitting.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* Example: show off-canvas on small screens, inline nav on larger *\/<\/span>\n<span class=\"hljs-keyword\">@media<\/span> (<span class=\"hljs-attribute\">min-width:<\/span> <span class=\"hljs-number\">900px<\/span>){\n  <span class=\"hljs-selector-class\">.hamburger<\/span>, <span class=\"hljs-selector-class\">.nav-toggle<\/span>, <span class=\"hljs-selector-class\">.overlay<\/span>{ <span class=\"hljs-attribute\">display<\/span>:none; }\n  <span class=\"hljs-selector-class\">.offcanvas<\/span>{\n    <span class=\"hljs-attribute\">position<\/span>: static;\n    <span class=\"hljs-attribute\">transform<\/span>: none;\n    <span class=\"hljs-attribute\">height<\/span>: auto;\n    <span class=\"hljs-attribute\">width<\/span>: auto;\n    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">0<\/span>;\n    <span class=\"hljs-attribute\">background<\/span>: transparent;\n  }\n  <span class=\"hljs-selector-class\">.offcanvas<\/span> <span class=\"hljs-selector-tag\">ul<\/span>{ <span class=\"hljs-attribute\">display<\/span>:flex; <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">20px<\/span>; }\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 id=\"should-you-use-cssonly-or-javascript-for-a-hamburger-menu\" class=\"wp-block-heading\">Should you use CSS-only or JavaScript for a hamburger menu?<\/h2>\n\n\n\n<p>CSS-only menus are quick, but minimal JavaScript is better for accessibility because it can update <code>aria-expanded<\/code>, close on Escape, and manage focus.<\/p>\n\n\n\n<h3 id=\"cssonly-checkbox-pattern-when-it-is-ok\" class=\"wp-block-heading\">CSS-only checkbox pattern (when it is OK)<\/h3>\n\n\n\n<p>Use CSS-only for demos, prototypes, or simple sites. Limitations: no automatic <code>aria-expanded<\/code>, no easy &#8220;close on link click&#8221;, and tricky &#8220;click outside to close&#8221; behavior.<\/p>\n\n\n\n<h3 id=\"minimal-js-button-pattern-recommended\" class=\"wp-block-heading\">Minimal JS button pattern (recommended)<\/h3>\n\n\n\n<p>Use a real button and toggle a class. Keep <code>aria-expanded<\/code> in sync and support Escape to close.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"hamburger\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"menuBtn\"<\/span> <span class=\"hljs-attr\">aria-controls<\/span>=<span class=\"hljs-string\">\"siteNav\"<\/span> <span class=\"hljs-attr\">aria-expanded<\/span>=<span class=\"hljs-string\">\"false\"<\/span>&gt;<\/span>Menu<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">nav<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"siteNav\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"offcanvas\"<\/span>&gt;<\/span>...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">nav<\/span>&gt;<\/span>\n\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n<span class=\"hljs-keyword\">const<\/span> btn = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'menuBtn'<\/span>);\n<span class=\"hljs-keyword\">const<\/span> nav = <span class=\"hljs-built_in\">document<\/span>.getElementById(<span class=\"hljs-string\">'siteNav'<\/span>);\n\nbtn.addEventListener(<span class=\"hljs-string\">'click'<\/span>, () =&gt; {\n  <span class=\"hljs-keyword\">const<\/span> open = btn.getAttribute(<span class=\"hljs-string\">'aria-expanded'<\/span>) === <span class=\"hljs-string\">'true'<\/span>;\n  btn.setAttribute(<span class=\"hljs-string\">'aria-expanded'<\/span>, <span class=\"hljs-built_in\">String<\/span>(!open));\n  nav.classList.toggle(<span class=\"hljs-string\">'is-open'<\/span>, !open);\n});\n\n<span class=\"hljs-built_in\">document<\/span>.addEventListener(<span class=\"hljs-string\">'keydown'<\/span>, (e) =&gt; {\n  <span class=\"hljs-keyword\">if<\/span> (e.key === <span class=\"hljs-string\">'Escape'<\/span>){\n    btn.setAttribute(<span class=\"hljs-string\">'aria-expanded'<\/span>, <span class=\"hljs-string\">'false'<\/span>);\n    nav.classList.remove(<span class=\"hljs-string\">'is-open'<\/span>);\n    btn.focus();\n  }\n});\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 id=\"hamburger-menu-css-variations-slidein-dropdown-overlay\" class=\"wp-block-heading\">Hamburger menu CSS variations (slide-in, dropdown, overlay)<\/h2>\n\n\n\n<p>Most hamburger menus share the same toggle. Variations come from positioning and transitions: dropdown, off-canvas, or full-screen overlay.<\/p>\n\n\n\n<h3 id=\"offcanvas-slidein\" class=\"wp-block-heading\">Off-canvas slide-in<\/h3>\n\n\n\n<p>Slide the nav in from a side and add an overlay. Keep the panel above the overlay with <code>z-index<\/code>.<\/p>\n\n\n\n<h3 id=\"dropdown-from-the-top\" class=\"wp-block-heading\">Dropdown from the top<\/h3>\n\n\n\n<p>Best for short navs. Place it under the header and animate <code>max-height<\/code> or <code>clip-path<\/code>.<\/p>\n\n\n\n<h3 id=\"fullscreen-overlay\" class=\"wp-block-heading\">Full-screen overlay<\/h3>\n\n\n\n<p>Use for many items. Set the nav to <code>position: fixed<\/code> with <code>inset: 0<\/code> and center links.<\/p>\n\n\n\n<h2 id=\"what-are-the-most-common-hamburger-menu-bugs\" class=\"wp-block-heading\">What are the most common hamburger menu bugs?<\/h2>\n\n\n\n<p>Most issues come from stacking context, scrolling, and focus.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Menu appears behind content.<\/strong> Use <code>position: fixed<\/code> and raise <code>z-index<\/code>. Parents with <code>transform<\/code> or <code>filter<\/code> can trap children.<\/li>\n\n\n<li><strong>Page scrolls behind the open menu.<\/strong> With JS, toggle <code>body{overflow:hidden}<\/code>. Pure CSS cannot reliably scroll-lock across browsers.<\/li>\n\n\n<li><strong>100vh jumps on mobile.<\/strong> Prefer <code>100dvh<\/code>, or use <code>top:0; bottom:0;<\/code> with <code>position: fixed<\/code>.<\/li>\n\n\n<li><strong>Links are not clickable.<\/strong> The overlay may be on top. Keep the panel above the overlay and avoid incorrect <code>pointer-events<\/code>.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"when-is-a-hamburger-menu-a-bad-idea\" class=\"wp-block-heading\">When is a hamburger menu a bad idea?<\/h2>\n\n\n\n<p>A hamburger menu is a bad idea when primary navigation is critical to conversion. If you only have a few top-level links, show them inline on desktop and use a hamburger only at small widths.<\/p>\n\n\n\n<h2 id=\"hamburger-menu-examples-to-takeaway\" class=\"wp-block-heading\">Hamburger Menu Examples to &#8220;Take-Away&#8221;<\/h2>\n\n\n\n<p>Here are a few examples you can reuse or use for inspiration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-responsive-css-hamburger-menu---css-only\">1 <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEJEWG\" target=\"_blank\" rel=\"noopener nofollow\">Responsive CSS Hamburger Menu &#8211; CSS only<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWEJEWG\" data-src=\"\/\/codepen.io\/anon\/embed\/MWEJEWG?height=450&amp;theme-id=1&amp;slug-hash=MWEJEWG&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWEJEWG\" title=\"CodePen Embed MWEJEWG\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEJEWG\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>It&#8217;s quite common to have burger menus to replace standard horizontal menus on small viewports. This way, the menu becomes completely <strong>responsive<\/strong> and provides the best experience depending on the viewport size.<\/p>\n\n\n\n<p>If that&#8217;s what you are looking for, this example will do exactly that, and with <strong>only CSS<\/strong>. To test it out, <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/MWEJEWG\" target=\"_blank\" rel=\"nofollow noopener\">open the codepen in a new window<\/a> and resize the result panel.<\/p>\n\n\n\n<p>In responsive mode, the hamburger menu will open the list of items one after the other in a vertical column coming from the top. Quite a standard behavior for mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2.-simple-centred-hamburger-menu\">2. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvrzPWL\" target=\"_blank\" rel=\"noopener nofollow\">Simple Centred Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvrzPWL\" data-src=\"\/\/codepen.io\/anon\/embed\/wvrzPWL?height=450&amp;theme-id=1&amp;slug-hash=wvrzPWL&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvrzPWL\" title=\"CodePen Embed wvrzPWL\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/wvrzPWL\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>This one is very simple but effective; it only uses HTML and CSS to pull off a hamburger menu with some cool animations.<\/p>\n\n\n\n<p>The hamburger icon itself, when clicked, transforms into a cross and works as the close button. The menu slides into view and displays in the centre with its navigation links.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you like sliding menu designs and cool animations with many options, you may be interested in <a href=\"https:\/\/alvarotrigo.com\/fullPage\/\">fullPage.js<\/a> &#8211; A library that allows you to build full-width, full-screen web pages that are scrollable. It is even available for WordPress with <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-elementor\/\">Elementor<\/a> and <a href=\"https:\/\/alvarotrigo.com\/fullPage\/wordpress-plugin-gutenberg\/\">Gutenberg<\/a> plugins and a <a href=\"https:\/\/alvarotrigo.com\/fullPage\/utils\/wordpress.html\">WordPress theme<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3.-left-sliding-responsive-hamburger-menu\">3. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWejzjR\" target=\"_blank\" rel=\"noopener nofollow\">Left Sliding Responsive Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_XWejzjR\" data-src=\"\/\/codepen.io\/anon\/embed\/XWejzjR?height=450&amp;theme-id=1&amp;slug-hash=XWejzjR&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed XWejzjR\" title=\"CodePen Embed XWejzjR\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/XWejzjR\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are looking for a more complete example of how a CSS hamburger menu can be useful, this CodePen renders an example website to showcase the use of the CSS hamburger menu.<\/p>\n\n\n\n<p>It only uses pure HTML and CSS, so it is easy to learn from and understand what is happening. The menu icon is animated and transforms into a cross when the menu is open.<\/p>\n\n\n\n<p>The menu itself slides out from the slide and overlays the main website. As this design is responsive, it will automatically hide the header menu and make the burger menu available once the screen width decreases.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>If you are also interested in menus and not only on the hamburger elemenet, check out these <a href=\"https:\/\/alvarotrigo.com\/blog\/slide-menus\/\">examples of great side menus<\/a> for your webpage!<\/p>\n<\/blockquote>\n\n\n\n<h2 id=\"alternatives-to-a-hamburger-menu\" class=\"wp-block-heading\">Alternatives to a Hamburger Menu<\/h2>\n\n\n\n<p>If you don\u2019t like the cons of a hamburger menu, here are some alternatives:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tabbed Menus.<\/strong> Display all features and functionalities on the screen. A good example is the Instagram app, which allows you to switch from one page to another with a single click.<\/li>\n\n\n\n<li><strong>Labeled Menu Button.<\/strong> Instead of the Hamburger button, simply put a \u201cMenu\u201d label, which is hard to miss.&nbsp;<\/li>\n\n\n\n<li><strong>Floating Menu.<\/strong> It is placed in a fixed position on the screen, and users can access it from any page.<\/li>\n\n\n\n<li><strong>Tab Bar With More Options.<\/strong> This is where primary navigation options are displayed on the screen. Users can click \u201cMore\u201d or \u201cOptions\u201d to unlock hidden features.<\/li>\n\n\n\n<li><strong>Swiping Feature.<\/strong> This option allows users to swipe to access different features. It is mainly used in dating and social media sites. For instance, swiping left on TikTok displays the person\u2019s profile. However, this works best when accompanied by screen icons.&nbsp;<\/li>\n\n\n\n<li><strong>Collapsing Menu.<\/strong> As the name suggests, the menu opens and collapses progressively. This technique is common in media websites and blogs.<\/li>\n<\/ul>\n\n\n\n<h2 id=\"faq\" class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<h3 id=\"can-you-make-a-hamburger-menu-with-css-only\" class=\"wp-block-heading\">Can you make a hamburger menu with CSS only?<\/h3>\n\n\n\n<p>Yes. A CSS-only hamburger menu usually uses a hidden checkbox and a label to toggle menu visibility with the <code>:checked<\/code> selector. It works without JavaScript, but it cannot update <code>aria-expanded<\/code> automatically.<\/p>\n\n\n\n<h3 id=\"what-is-the-best-size-for-a-hamburger-icon\" class=\"wp-block-heading\">What is the best size for a hamburger icon?<\/h3>\n\n\n\n<p>A common size is 24 to 32px wide with 2 to 4px bar thickness and 4 to 6px spacing. The tap target should be at least 44 by 44px.<\/p>\n\n\n\n<h3 id=\"how-do-i-stop-the-page-from-scrolling-when-the-menu-is-open\" class=\"wp-block-heading\">How do I stop the page from scrolling when the menu is open?<\/h3>\n\n\n\n<p>With JavaScript, toggle a class on <code>body<\/code> and use <code>overflow: hidden;<\/code>. Pure CSS cannot reliably lock body scroll across browsers for all layouts.<\/p>\n\n\n\n<h3 id=\"why-is-my-hamburger-menu-behind-other-elements\" class=\"wp-block-heading\">Why is my hamburger menu behind other elements?<\/h3>\n\n\n\n<p>Usually a z-index or stacking context problem. Give the menu and overlay <code>position: fixed<\/code> or <code>absolute<\/code> and a higher <code>z-index<\/code>. Parents with <code>transform<\/code>, <code>filter<\/code>, or <code>opacity<\/code> can create new stacking contexts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"takeaway\">Takeaway<\/h2>\n\n\n\n<p>We\u2019ve seen a lot of different designs for CSS hamburger menus, some traditional, some a little different. Hopefully, you have found something you like from our examples and found inspiration to use one on your next website.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Find the perfect combination for your hamburger menu by using one of these <a href=\"https:\/\/alvarotrigo.com\/blog\/javascript-menus\/\">amazing JavaScript menus<\/a>.<\/p>\n<\/blockquote>\n\n\n\n<p>The CSS hamburger menu has a wide range of uses: from responsive design, interactive experiences with floating menu icons, and providing you with more space with an off-canvas menu.<\/p>\n\n\n\n<p>Overall, CSS responsive hamburger menus are a great way to make your <a href=\"https:\/\/alvarotrigo.com\/blog\/website-layouts\/\">website layout<\/a> responsive and scale down to smaller screens on mobile devices. It is an easy way to make your header navigation section responsive and adaptable to different screen sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"related-articles\">Related articles<\/h2>\n\n\n\n<p>More articles which you may find interesting.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/create-a-slidebar-bullet-navigation-to-smoothly-snap-to-sections\/\">How to Create a SlideBar Bullet-Navigation<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/10-cool-css-animations-to-add-to-your-website\/\">Cool CSS Animations For Your Website<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-timelines\/\">HTML &amp; CSS Timelines Examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/website-footers\/\">Beautiful Website Footer Examples<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/css-text-animations\/\">Gorgeous CSS Text Animation Effects<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/alvarotrigo.com\/blog\/html-css-tabs\/\">Best HTML and CSS Tabs examples<\/a><\/li>\n<\/ul>\n\n\n<h2 id=\"hamburger-menu-is-it-always-the-tastiest-option\" class=\"wp-block-heading\">Hamburger Menu: Is it Always the <em>\u201cTastiest\u201d<\/em> Option?<\/h2>\n\n\n\n<p><strong>No, the hamburger menu isn\u2019t always the best option, and it could need some improvements. If the features added to the menu aren\u2019t important to your users, then you don\u2019t need it. But if you\u2019re looking for increased functionality, then yes, it&#8217;s a great alternative.<\/strong><\/p>\n\n\n\n<p>Sites with numerous animations don\u2019t require the Hamburger Menu. Also, there is no point in including it if all the important features will be hidden. However, let\u2019s consider real estate or gaming websites and apps.&nbsp;<\/p>\n\n\n\n<p>In such cases, this additional navigation helps to prevent visitors from being overwhelmed with numerous options and information. Imagine visiting the Minecraft website on your phone without the hidden menu. This means everything from games to shop, community, support, and accounts is displayed simultaneously, which is chaotic.&nbsp;<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5.-hamburger-menu-animations\">5. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/VwMPzVJ\" target=\"_blank\" rel=\"noopener nofollow\">Hamburger menu animations<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwMPzVJ\" data-src=\"\/\/codepen.io\/anon\/embed\/VwMPzVJ?height=450&amp;theme-id=1&amp;slug-hash=VwMPzVJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwMPzVJ\" title=\"CodePen Embed VwMPzVJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/VwMPzVJ\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>If you are looking for different animations for your hamburger menu icon, you have to take a look at these ones.<\/p>\n\n\n\n<p>It uses a single line of JavaScript (or jQuery) to set the state of the burger. The rest is all pure CSS.<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6.-snappy-sliding-hamburger-menu\">6. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLzaPVJ\" target=\"_blank\" rel=\"noopener nofollow\">Snappy Sliding Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_yLzaPVJ\" data-src=\"\/\/codepen.io\/anon\/embed\/yLzaPVJ?height=450&amp;theme-id=1&amp;slug-hash=yLzaPVJ&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed yLzaPVJ\" title=\"CodePen Embed yLzaPVJ\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/yLzaPVJ\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A very snappy and slick CSS hamburger menu that only uses HTML and CSS to pull this off.<\/p>\n\n\n\n<p>The menu itself quickly slides out from the left and does not take up the whole screen, just the left side. The menu items have a nice hover effect as well. And if this effect is not fancy enough for you, you can create a better hover effect by getting inspiration from these <a href=\"https:\/\/alvarotrigo.com\/blog\/best-css-button-hover-effects\/\">CSS Button hover effects<\/a>.<\/p>\n\n\n\n<p>Good to work from if you are looking to add this to an existing website or you only want the basic structure.<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7.-top-left-animated-hamburger-menu\">7. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oNGzoYd\" target=\"_blank\" rel=\"noopener nofollow\">Top Left Animated Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNGzoYd\" data-src=\"\/\/codepen.io\/anon\/embed\/oNGzoYd?height=450&amp;theme-id=1&amp;slug-hash=oNGzoYd&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNGzoYd\" title=\"CodePen Embed oNGzoYd\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/oNGzoYd\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Most CSS hamburger menus either slide out from the left and right or take up the whole screen. But this one is a bit different because it only uses the top left corner inside a bubble-shaped menu.<\/p>\n\n\n\n<p>Very unique compared to the traditional hamburger menu design, this example could easily be changed to edit the colours or add an effective shadow on the background.<\/p>\n\n\n\n<p>This one does use JavaScript, but it is only very minimal: basically just to toggle the CSS classes to change the menu status, open or closed. Nothing complicated. No libraries or dependencies to rely on, just pure JavaScript that is very basic.<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8.-simple-left-sliding-hamburger-menu-overlay\">8. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/PoJGObg\" target=\"_blank\" rel=\"noopener nofollow\">Simple Left-Sliding Hamburger Menu Overlay<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoJGObg\" data-src=\"\/\/codepen.io\/anon\/embed\/PoJGObg?height=450&amp;theme-id=1&amp;slug-hash=PoJGObg&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoJGObg\" title=\"CodePen Embed PoJGObg\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/PoJGObg\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>The animation is smooth and doesn\u2019t feel tacky. The menu slides out from the left and sits on top of any main content behind it.<\/p>\n\n\n\n<p>Doesn\u2019t require any JavaScript, just works purely based on HTML and CSS, easy to work from or adapt to your liking.<\/p>\n\n\n\n<p>The menu itself will be easy to edit and add your own content, simply write your own HTML elements inside, and the menu will slide out.<\/p>\n\n\n\n<p>The hamburger menu icon also has a smooth open and close animation that only uses CSS.<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9.-animated-full-screen-hamburger-menu\">9. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/QWqKOdb\" target=\"_blank\" rel=\"noopener nofollow\">Animated Full Screen Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWqKOdb\" data-src=\"\/\/codepen.io\/anon\/embed\/QWqKOdb?height=450&amp;theme-id=1&amp;slug-hash=QWqKOdb&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWqKOdb\" title=\"CodePen Embed QWqKOdb\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/QWqKOdb\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Featuring a floating CSS hamburger menu icon inside a circular background, once clicked, the menu uses a curricular opening animation.<\/p>\n\n\n\n<p>The animation is very smooth and opens from the point of the menu icon itself.<\/p>\n\n\n\n<p>Taking up the full screen would be great for busy navigation menus that require a lot of space with images, icons, and text.<\/p>\n\n\n\n<p>Only uses pure HTML and CSS to pull this off.<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10.-full-screen-morphing-hamburger-menu\">10. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ExwgbZv\" target=\"_blank\" rel=\"noopener nofollow\">Full Screen Morphing Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExwgbZv\" data-src=\"\/\/codepen.io\/anon\/embed\/ExwgbZv?height=450&amp;theme-id=1&amp;slug-hash=ExwgbZv&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExwgbZv\" title=\"CodePen Embed ExwgbZv\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/ExwgbZv\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>A fun animated CSS hamburger menu that morphs outwards from the top right corner of the screen into a full-screen menu.<\/p>\n\n\n\n<p>Only using HTML and CSS, the structure is simple to follow and make edits to add your own content and navigation links\/style.<\/p>\n\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11.-multi-depth-hamburger-menu\">11. <a href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLGjKq\" target=\"_blank\" rel=\"noopener nofollow\">Multi-Depth Hamburger Menu<\/a><\/h3>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwLGjKq\" data-src=\"\/\/codepen.io\/anon\/embed\/RwLGjKq?height=450&amp;theme-id=1&amp;slug-hash=RwLGjKq&amp;default-tab=css,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwLGjKq\" title=\"CodePen Embed RwLGjKq\" class=\"cp_embed_iframe lazyload\" style=\"width:100%;overflow:hidden\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" data-load-mode=\"1\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/codepen.io\/alvarotrigo\/pen\/RwLGjKq\" title=\"Preview\" target=\"_blank\" rel=\"noopener nofollow\">Preview<\/a><\/div>\n<\/div>\n\n\n\n<p>Sliding out from the left side of the screen, this menu design is more suited for complex navigation.<\/p>\n\n\n\n<p>It has a lovely sliding animation, but the menu itself uses a very well-structured item list that can go multiple depths, which is useful for inner categories.<\/p>\n\n\n\n<p>It uses HTML and CSS, which are generated from SCSS.<\/p>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Build a hamburger menu CSS-only with copy-paste HTML\/CSS. Includes hamburger-to-X animation, checkbox toggle nav\/overlay, and 10+ variations.<\/p>\n","protected":false},"author":11,"featured_media":5076,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[106],"tags":[9,16,17],"class_list":["post-5077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-css","tag-design","tag-web"],"acf":[],"_links":{"self":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/comments?post=5077"}],"version-history":[{"count":9,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5077\/revisions"}],"predecessor-version":[{"id":19700,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/posts\/5077\/revisions\/19700"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media\/5076"}],"wp:attachment":[{"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/media?parent=5077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/categories?post=5077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alvarotrigo.com\/blog\/wp-json\/wp\/v2\/tags?post=5077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}