@use 'sprucecss/scss/spruce' as *;

.site-header {
  background-color: color('background');
  position: relative;

  // Sticks to the top with a translucent background; the border appears once it's stuck.
  &--sticky {
    backdrop-filter: blur(12px);
    background-color: color-alpha('background', 0.85);
    border-block-end: config('border-width-base', $display) solid color('border');
    inset-block-start: 0;
    position: sticky;
    z-index: z-index('sticky');
  }

  &__inner {
    --block-size: 4.5rem;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer-clamp('s', 'l');
    justify-content: space-between;
    min-block-size: var(--block-size);
  }

  &__column {
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: spacer-clamp('s', 'l');
  }

  &__actions {
    align-items: center;
    display: flex;
    gap: spacer-clamp('s', 'l');
  }

  &__logo {
    display: inline-flex;

    img {
      --size: 2rem;
      block-size: var(--size);
      inline-size: var(--size);
    }
  }

  &__email {
    display: none;
    text-decoration: none;

    @include breakpoint('sm') {
      display: inline-block;
    }
  }

  &__navigation {
    margin-inline-start: auto;

    @include breakpoint('md') {
      margin-inline-start: 0;
    }

  }
}

<a class="skip-link sr-only-focusable" href="#content">Skip to content</a>
<header class="site-header site-header--sticky">
    <div class="container">
        <div class="site-header__inner">
            <div class="site-header__column">
                <a class="site-header__logo" href="#">
                    <img src="/img/cone-logo.svg" alt="Cone home" width="48" height="48">
                </a>
                <nav class="site-navigation site-header__navigation" aria-label="Main" data-site-navigation>
                    <button class="btn btn--primary btn--icon site-navigation__btn" type="button" aria-controls="primary-menu" aria-expanded="false">
                        <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="site-navigation__line site-navigation__line--top" d="M4 6h16"/><path class="site-navigation__line site-navigation__line--middle" d="M4 12h16"/><path class="site-navigation__line site-navigation__line--bottom" d="M4 18h16"/></svg>
                        <span class="sr-only">Menu</span>
                    </button>
                    <ul class="navigation-menu" id="primary-menu">
                        <li class="site-navigation__item">
                            <button class="site-navigation__toggle" type="button" aria-expanded="false" aria-controls="primary-submenu-1">
                                Services
                                <svg class="site-navigation__chevron" aria-hidden="true" fill="none" focusable="false" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"/></svg>
                            </button>
                            <ul class="site-navigation__submenu" id="primary-submenu-1">
                                <li><a href="#">Web design</a></li>
                                <li><a href="#">Development</a></li>
                                <li><a href="#">Branding</a></li>
                                <li><a href="#">Consulting</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Products</a></li>
                        <li><a href="#" aria-current="page">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="site-header__actions">
                <a class="site-header__email" href="mailto:hello@conedevelopment.com">hello@conedevelopment.com</a>
                <a class="btn btn--primary btn--sm" href="#">
                    <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    Log in
                </a>
            </div>
        </div>
    </div>
</header>

Basic

Anatomy

.site-header is the header element (the banner landmark). .site-header--sticky makes it stick to the top.
.site-header__inner follows the container anatomy; .site-header__column groups the logo and the Site Navigation; .site-header__actions holds the email (from the sm breakpoint) and the button.
A Skip Link comes before the header.

Accessibility

The logo link's alt text says where it goes ("Cone home"), because the image is the only content of the link.
The skip link lets keyboard users jump over the header to the main content (the main element, #content here).
The sticky header only covers the page as much as it has to; add scroll-padding-block-start to the html element with its height, so in-page links and focused elements don't end up under it.

Technical Details

The header's minimum height is --block-size (4.5rem); the mobile navigation panel opens right below it.
The translucent sticky background uses color-alpha('background', 0.85) with a backdrop blur, and the sticky level of the z-index scale.
Load the Site Navigation script for the menu button.
Override the links, the email and the action with siteHeader ({ links: [{ label, href, current, children }], email, action: { label, href, icon } }); the current link gets aria-current="page". A link with children ([{ label, href, current }]) becomes a dropdown (see the Site Navigation).