Header + navigation

<style>
.site-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 1rem 2rem;
  font-family: sans-serif;

  background: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
}

.site-hd__logo {
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  color: #111;
}

.site-hd__nav {
  display: flex;
  gap: 2rem;
}

.site-hd__nav a {
  text-decoration: none;
  color: #333;
  font-size: 0.95rem;
}

.site-hd__nav a:hover {
  color: #000;
}

/* Case à cocher cachée, et bouton "hamburger" caché par défaut
   (visible seulement en dessous de 700px, voir media query) */
.site-hd__toggle-input {
  display: none;
}

.site-hd__toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.site-hd__toggle-label span {
  width: 26px;
  height: 2px;
  background: #111;
}

@media (max-width: 700px) {
  .site-hd__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    flex-direction: column;
    gap: 0;

    background: #fff;
    max-height: 0;
    overflow: hidden;

    transition: max-height 0.3s ease;
  }

  .site-hd__nav a {
    padding: 1rem 2rem;
    border-top: 1px solid #eee;
  }

  .site-hd__toggle-label {
    display: flex;
  }

  /* Quand la case est cochée (menu ouvert), on donne de la hauteur
     au menu pour qu'il devienne visible */
  .site-hd__toggle-input:checked ~ .site-hd__nav {
    max-height: 300px;
  }
}

</style>

<header class="site-hd">
  <a href="#" class="site-hd__logo">VotreLogo</a>

  <!-- Case à cocher invisible : sert d'interrupteur pour le menu
       mobile, entièrement piloté en CSS (voir style.css) -->
  <input type="checkbox" id="site-hd-toggle" class="site-hd__toggle-input" />
  <label for="site-hd-toggle" class="site-hd__toggle-label" aria-label="Ouvrir le menu">
    <span></span><span></span><span></span>
  </label>

  <nav class="site-hd__nav">
    <a href="#">Accueil</a>
    <a href="#">Services</a>
    <a href="#">À propos</a>
    <a href="#">Contact</a>
  </nav>
</header>