Header voorbeeld met logo visueel voorbeeld

Benodigde stappen:

1. Voeg de benodigde HTML toe. Voor meer informatie zie: voorbeelden.

Voorbeelden:

Voor het visuele voorbeeld zie de header van deze pagina.

HTML-voorbeeld:

<header>
  <div>
      <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>

      <a href="/" class="logo">
          <img src="/img/logo-white.svg" alt="Placeholder logo">Manon
      </a>

      <nav
      data-open-label="Menu"
      data-close-label="Sluit menu"
      data-media="(min-width: 30rem)"
      aria-label="Hoofdnavigatie"
      class="collapsible">

        <div class="collapsing-element">
            <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/components" aria-current="page">Componenten</a></li>
            <li><a href="/documentation">Documentatie</a></li>
            </ul>
        </div>
      </nav>
  </div>
</header>

CSS-voorbeeld:

Ingestelde variabelen voor deze weergave

:root {
  /* Header */
  --header-padding-right: 1rem;
  --header-padding-left: 1rem;
  --header-min-height: 3rem;
  --header-flex-direction: row;
  --header-justify-content: space-between;
  --header-background-color: #1b1b39;
  --header-navigation-text-color: white;
  --header-navigation-padding-right: 0;
  --header-navigation-padding-left: 0;
  --header-navigation-position: initial;

  /* Header Content wrapper */
  --header-content-wrapper-position: relative;

  /* Navigation */
  --header-navigation-border-width: 0;
  --header-navigation-width: auto;
  --header-navigation-position: static;

  /* Link styling */
  --header-navigation-link-text-color: white;
  --header-navigation-link-hover-text-color: var(--header-navigation-link-text-color);
  --header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);
  --header-navigation-link-visited-hover-text-color: var(--header-navigation-link-text-color);
  --header-navigation-link-active-text-color: var(--header-navigation-link-text-color);

  /* Menu toggle button */
  --navigation-collapsible-menu-button-background-color: transparent;
  --navigation-collapsible-menu-icon-color: var(--header-navigation-link-text-color);

  /* Collapsible menu */
  --header-navigation-collapsible-menu-top: 4rem;
}