Note: This is part of a much larger post on navigation menus here.

Don’t just use a basic font-awesome burger. Animate to an X instead of a static jump. Use an SVG for two-tone or just use basic CSS to create.

Duotone SVG: Used by treehugger.com, thoughtco,

//Code here

One of the first “built from scratch” icons I used was a big fatty with a boarder-radius:

// &__menu-icon-container {
    display: block;
    position: absolute;
    /* border: 2px solid aqua; */
    height: 29px;
    width: 28px;
    cursor: pointer;
    right: 1rem;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 28px;
      height: 3px;
      background-color: #fff;
      border-radius: 3px;
      border: 2px solid #fff;
      transform-origin: 0 0;
      transition: transform 0.3s ease-out;
    }

    &__middle {
      position: absolute;
      top: 11px;
      left: 0;
      width: 32px;
      height: 7px;
      background-color: #fff;
      border-radius: 3px;
      border: 2px solid #fff;
      transition: all 0.3s ease-out;
      transform-origin: 0 50%;
      padding: 0;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 28px;
      height: 3px;
      background-color: #fff;
      border-radius: 3px;
      border: 2px solid #fff;
      transform-origin: 0 100%;
      transition: transform 0.3s ease-out;
    }

    @mixin atMedium {
      display: none;
    }
  }

  &__menu-icon-container--close-x {
    &::before {
      transform: rotate(45deg) scaleX(1.3) translate(0, -4px);
      border: 2px solid transparent;
    }

    .site-header__menu-icon-container__middle {
      opacity: 0;
      transform: scaleX(0);
    }

    &::after {
      transform: rotate(-45deg) scaleX(1.3) translate(0, 4px);
      border: 2px solid transparent;
    }
  }
}

.menu-custom-menu-container {
  position: absolute;
  z-index: 10;
  /* border: 6px solid purple; */
  background-color: $primary;
  width: 100%;
  top: 100%;
  display: flex;
  flex-direction: column;
  transform: scale(1, 0);
  visibility: hidden;
  opacity: 0;
  transition: transform 300ms ease-in-out;
  transform-origin: top;

  @mixin atMedium {
    position: relative;
    top: 0;
    transform: scale(1, 1);
    visibility: visible;
    opacity: 1;
    transition: none;
    margin: 0;
    /* width: 74%; */
    flex-direction: row;
    justify-content: flex-end;
  }
}

.menu-custom-menu-container.toggle {
  /* border: 4px solid aquamarine; */
  transform: scale(1, 1);
  visibility: visible;
  opacity: 1;
}

Thinner Version

//Code Here

The varied length burger bars: simplyrecipes, liquor, hubspot

Here’s a stab at my own with a cascade to shorter in width top to bottom

  &__menu-icon-container {
    display: block;
    position: absolute;
    /* border: 2px solid aqua; */
    height: 20px;
    width: 28px;
    cursor: pointer;
    right: 1rem;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 28px;
      height: 4px;
      background-color: $menuIconBarsStart;
      transform-origin: 0 0;
      transition: transform 0.2s ease-out;
    }

    &__middle {
      position: absolute;
      top: 8px;
      left: 0;
      width: 24px;
      height: 4px;
      background-color: $menuIconBarsStart;
      transition: all 0.2s ease-out;
      transform-origin: 0 50%;
      padding: 0;
    }

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 20px;
      height: 4px;
      background-color: $menuIconBarsStart;
      transform-origin: 0 100%;
      transition: transform 0.2s ease-out;
    }

    @mixin atMedium {
      display: none;
    }
  }

  &__menu-icon-container--close-x {
    &::before {
      transform: rotate(45deg) scaleX(1.15) translate(0, -4px);
      background-color: $menuIconBarsEnd;
    }

    .site-header__menu-icon-container__middle {
      opacity: 0;
      transform: scaleX(0);
      background-color: $menuIconBarsEnd;
    }

    &::after {
      transform: rotate(-45deg) scaleX(1.61) translate(0, 4px);
      background-color: $menuIconBarsEnd;
    }
  }
}

The two bar burger: Apple (swap places and turn), vercel

Static but at least change the color: thebalance,

No animation static switch: dotdash,

Skip the burger for a grid: seriouseats,

Animated: webflow, hubspot (cartwheel), weather (wave thing), homedepot (slot machine), espn (delay at meeting),

The no change burger: Github.com

No Mobile at all 1: Stick to your buttons and disappear as the desktop window gets smaller or disregard mobile at all (I’m looking at you pinterest and msn and yahoo, yelp).

No Mobile at all #2: Site is a landing page trying to get you to signup so there’s not many places they want you to go so you don’t need a menu. linkedin, instagram, netflix, roblox