<header class="header">
  <!-- this checkbox handles the hide/show menu logic -->
  <input type="checkbox" class="header__burger">

  <a href="https://remybeumier.be" target="_blank" class="header__logo">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="logo-gradient" viewBox="0 0 600 600">
      <defs>
        <style>
          .cls-1 {
            fill: url(#linear-gradient);
          }
        </style>
        <linearGradient id="linear-gradient" x1="435.39" y1="490.86" x2="84.52" y2="139.99" gradientUnits="userSpaceOnUse">
          <stop offset="0" stop-color="#0093E9" />
          <stop offset="1" stop-color="#80D0C7" />
        </linearGradient>
      </defs>
      <path class="cls-1" d="M446,352h-.33q-4.68-37.26-25.73-55.6a73.82,73.82,0,0,0-14.19-9.55c-6.37,18.34-16.14,32-27.37,42.17q10.67,11.87,11.1,30.65c.2,2.43.31,5,.31,7.63v69.57q-1.06,21.12-11.63,31.41-11.76,11.43-36.6,11.43H261.83v-.09H210.09V339.21h64l51.38,115.5h16c9.2,0,16.37-1.63,19.17-4.35,2.15-2.09,3.65-7.36,4.06-14.18V405.64l-35.1-77.54Q388.5,309.82,388.49,236V173.22q0-52.93-28.42-77.44t-84-24.51H153.23V528.73H335.67q59.46,0,85.29-23.53t25.81-79.73V366.66A135.33,135.33,0,0,0,446,352ZM210.09,120.29h73.84q24.82,0,36.27,11.11t11.44,35.94v75.15q0,24.84-11.44,36.27T283.93,290.2H210.09Z" />
    </svg>
  </a>

  <div class="header__links">
    <a href="#0" class="header__link">Link with sublinks</a>
    <div class="header__sublinks">
      <a href="#0">Sublink</a>
      <a href="#0">Sublink</a>
      <a href="#0">Sublink</a>
      <a href="#0">Sublink</a>
      <a href="#0">Sublink</a>
    </div>
    <a href="#0" class="header__link">Link</a>
    <a href="#0" class="header__link">Link</a>
    <a href="#0" class="header__link">Link</a>
    <a href="#0" class="header__link">Link</a>
  </div>
</header>

<main>
  <p>Resize your window to see the difference between mobile and desktop.</p>
  <p>Breakpoint is at 1024px.</p>
  <a href="https://remybeumier.be/blog/css-only-responsive-navbar" target="_blank" class="header__logo">Find the related article</a>
</main>

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  line-height: 1.5;
}

.header {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background-color: white;

  .header__logo {
    display: flex;
    padding: 11px;
    transition: background-color 0.3s ease-in-out;
    &:hover,
    &:focus {
      background-color: #f5f5f5;
    }
    svg {
      min-width: 32px;
    }
  }

  .header__links {
    display: none;
    flex-direction: column;
    padding: 8px 0;
    border-top: solid 1px #e5e5e5;
    width: 100%;
  }

  .header__link {
    color: #333;
    text-decoration: none;
    padding: 8px 16px;
    white-space: nowrap;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    &:hover,
    &:focus {
      background-color: #f5fafb;
      color: #80d0c7;
    }
    &.active {
      background-color: #f5fafb;
    }
    + .header__sublinks {
      > a {
        display: block;
        padding: 4px 8px;
        margin-left: 16px;
        color: #55626a;
        font-size: 0.875rem;
        text-decoration: none;
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
        &:hover,
        &:focus {
          color: #80d0c7;
          background-color: #f5fafb;
        }
      }
    }
  }

  .header__burger {
    position: absolute;
    right: 0;
    top: 0;
    width: 54px;
    height: 54px;
    margin: 0;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
    &::after {
      content: "";
      height: 24px;
      width: 24px;
      top: 15px;
      left: 15px;
      position: absolute;
      background: linear-gradient(
        to bottom,
        #80d0c7 20%,
        transparent 20% 40%,
        #80d0c7 40% 60%,
        transparent 60% 80%,
        #80d0c7 80% 100%
      );
    }
    &:hover,
    &:focus {
      background-color: #f5f5f5;
    }
    &:checked {
      ~ .header__links {
        display: flex;
      }
    }
  }

  /* change brekpoint here */
  @media only screen and (min-width: 1024px) {
    flex-direction: row;
    align-items: center;

    .header__links {
      display: flex;
      flex-direction: row;
      padding: 0;
      border-top: none;
      width: auto;
    }

    .header__link {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 54px;
      padding: 9px 10px;
      &:hover,
      &:focus {
        + .header__sublinks {
          height: 42px;
        }
      }

      + .header__sublinks {
        display: flex;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 54px;
        height: 0;
        overflow: hidden;
        background-color: #f5fafb;
        border-top: solid 1px #e5e5e5;
        transition: height 0.3s ease-in-out;
        > a {
          padding: 10px;
          margin-left: 0;
          color: #333;
          font-size: 1rem;
        }
        &:hover,
        &:focus-within {
          height: 42px;
        }
      }
    }

    .header__burger {
      display: none;
    }
  }
}

main {
  background-color: #0093e9;
  background-image: linear-gradient(-30deg, #0093e9 0%, #80d0c7 100%);
  height: 200vh;
  padding: 40px 20px;

  p {
    margin: 0;
    text-align: center;
    color: white;
    font-size: 20px;
    + p {
      margin-top: 0.5em;
    }
  }

  a {
    text-align: center;
    display: block;
    margin-top: 0.5em;
    font-size: 20px;
    color: white;
    &:hover {
      color: #ddd;
    }
  }
}