{"id":5079,"date":"2022-01-12T01:00:00","date_gmt":"2022-01-12T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/hamburger-menu-css-responsive\/"},"modified":"2024-02-08T00:36:08","modified_gmt":"2024-02-07T23:36:08","slug":"hamburger-menu-css-responsive","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/hamburger-menu-css-responsive\/","title":{"rendered":"How To Make a Responsive Hamburger Menu [CSS]"},"content":{"rendered":"\n

A CSS hamburger menu (responsive)<\/strong> is one of those cool slide-out navigation menus that appears when you click those three-line menu icons.<\/p>\n\n\n\n

(It\u2019s also a convenient way to buy fast food – but that\u2019s not important right now)<\/p>\n\n\n\n

\n

Looking for ready-to-use hamburger menus examples? Check these 10 CodePens of CSS Hamburger Menus<\/a>.<\/p>\n<\/blockquote>\n\n\n\n

\"Create<\/figure>\n\n\n\n

In this post, you\u2019ll learn how to create a responsive hamburger menu (CSS only – no JS needed!)<\/strong>. But you might be wondering, why bother? Why hide your beautiful navigation behind a hamburger icon?<\/p>\n\n\n

Advantages of a Responsive CSS Hamburger Menu<\/h2>\n\n\n
    \n
  1. According to Oberlo, over 56% of web traffic<\/a> comes through mobile devices.<\/li>\n\n\n\n
  2. Full-width navigation menus are often unusable on small screens.<\/li>\n\n\n\n
  3. Positioning menu items vertically solves this problem – but then the user has to scroll past the menu to get to the content – not ideal.<\/li>\n\n\n\n
  4. By using fixed positioning on the hamburger icon, your visitors can access the nav no matter where they are on your page.<\/li>\n<\/ol>\n\n\n\n

    OK enough talk, let’s make one! First, we’ll start with the structure…<\/p>\n\n\n

    Structure of a Responsive Hamburger Menu (HTML)<\/h2>\n\n\n

    If we were using JavaScript to do this, we’d set up an event listener to detect when the user clicks on the icon, then trigger the menu to appear.<\/p>\n\n\n\n

    Since we’re making this responsive hamburger menu CSS-style, we have to use a different approach.<\/p>\n\n\n\n

    We need two elements, a button<\/code> for the icon, and a nav<\/code> for the menu itself. The nav<\/code> element needs to be nested inside the button:<\/p>\n\n\n

    <button<\/span> id<\/span>=\"hamburger-menu\"<\/span>><\/span>\n  <nav<\/span> id<\/span>=\"sidebar-menu\"<\/span>><\/span>\n  <\/nav<\/span>><\/span>\n<\/button<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    You can fill your nav<\/code> menu with anything you want. We’ll just use some common top-level pages for this example (don’t forget to replace #<\/code> with your actual page urls!):<\/p>\n\n\n
    <label<\/span> id<\/span>=\"hamburger-menu\"<\/span>><\/span>\n  <nav<\/span> id<\/span>=\"sidebar-menu\"<\/span>><\/span>\n    <h3<\/span>><\/span>Menu<\/h3<\/span>><\/span>\n    <ul<\/span>><\/span>\n      <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Home<\/a<\/span>><\/span><\/li<\/span>><\/span>\n      <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Store<\/a<\/span>><\/span><\/li<\/span>><\/span>\n      <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Blog<\/a<\/span>><\/span><\/li<\/span>><\/span>\n      <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>About<\/a<\/span>><\/span><\/li<\/span>><\/span>\n      <li<\/span>><\/span><a<\/span> href<\/span>=\"#\"<\/span>><\/span>Contact<\/a<\/span>><\/span><\/li<\/span>><\/span>\n    <\/ul<\/span>><\/span>\n  <\/nav<\/span>><\/span>\n<\/label<\/span>><\/span>\n\n<div<\/span> class<\/span>=\"overlay\"<\/span>><\/span><\/div<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n