Stap 3 — Basis-navbar plaatsen (met logo)

We voegen een responsieve navbar toe met een SVG-logo als home-link. Daarna kiezen we voor fixed-top of sticky-top, en zorgen we voor een duidelijke active link.

3.1 Navbar-markup (in je project index.html)

Plaats deze navbar bovenaan in <body>, vóór je hoofdinhoud.

<nav class="navbar navbar-expand-lg bg-body-tertiary" id="site-navbar" data-bs-theme="light">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">Projectnaam</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav"
            aria-controls="mainNav" aria-expanded="false" aria-label="Navigatie openen">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Over</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

3.1a Logo exporteren (Illustrator → SVG)

  1. File → Save As… → SVG
  2. SVG Profiles: SVG 1.1 · Styling: Presentation Attributes · Images: Embed
  3. Decimal: 2–3 · Minify: aan · Responsive: aan
  4. Zorg dat de SVG een viewBox heeft.
  5. Sla op als assets/img/logo.svg (pas pad aan indien nodig).

Kleur laten erven? In je SVG kun je fill op paden vervangen door fill="currentColor", zodat het logo de tekstkleur van de navbar overneemt.

3.1b Navbar met SVG-logo als home-link

Vervang de tekst “Projectnaam” (uit 3.1) door het logo-anker hieronder.

<nav class="navbar navbar-expand-lg bg-body-tertiary" id="site-navbar" data-bs-theme="light">
  <div class="container">

    <!-- Brand: SVG-logo als home-link -->
    <a class="navbar-brand d-flex align-items-center" href="/" aria-label="Home">
      <!-- LET OP: pad naar je logo; in je cursuspagina kan dit bv. ../../../assets/img/logo.svg zijn -->
      <img src="assets/img/logo.svg" alt="Projectnaam logo" height="32" class="me-2">
      <span class="fw-bold d-none d-sm-inline">Projectnaam</span>
    </a>

    <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse"
            data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false"
            aria-label="Navigatie openen">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mainNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" href="/" aria-current="page">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="/over.html">Over</a></li>
        <li class="nav-item"><a class="nav-link" href="/contact.html">Contact</a></li>
      </ul>
    </div>

  </div>
</nav>

3.1c Kleine CSS (maat & kleur)

Voeg in assets/css/custom.css toe (of je cursus-CSS):

/* Logo-grootte: schaal met de navbar mee */
.navbar-brand img { height: 32px; width: auto; }
@media (min-width: 992px){
  .navbar-brand img { height: 40px; }
}

/* Optioneel: logo/tekst op merkkleur (werkt mooi als je SVG 'currentColor' gebruikt) */
.navbar-brand { color: var(--brand-primary); }
.navbar-brand:hover { color: color-mix(in oklab, var(--brand-primary), black 10%); }

/* Inline-SVG variatie (als je <svg class="brand-mark"> gebruikt) */
/* .brand-mark * { fill: currentColor; } */

3.2 Vastzetten bovenaan (twee opties)

Optie A — altijd vast: fixed-top gebruiken en je hoofdinhoud marge geven.

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top" id="site-navbar" data-bs-theme="light">...</nav>

<main class="container" style="margin-top:5rem;">
  <h1 class="pt-4">Titel</h1>
  <p>Inhoud...</p>
</main>

Optie B — sticky na scroll: sticky-top (minder snel overlap, vaak geen extra marge nodig).

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top" data-bs-theme="light">...</nav>
Let op: Bij fixed-top moet je doorgaans je eerste sectie of <main> een margin-top geven (± 5rem).

3.3 Active link (per pagina)

Zorg dat precies één link .active heeft en aria-current="page" op de actieve pagina.

<!-- Op index.html -->
<a class="nav-link active" href="/" aria-current="page">Home</a>

<!-- Op over.html / over.php -->
<a class="nav-link" href="/">Home</a>
<a class="nav-link active" href="/over.html" aria-current="page">Over</a>

3.4 (Optioneel) Dropdown

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="menuDrop" role="button" data-bs-toggle="dropdown" aria-expanded="false">Meer</a>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="menuDrop">
    <li><a class="dropdown-item" href="#">Carousel</a></li>
    <li><a class="dropdown-item" href="#">Parallax</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Footer</a></li>
  </ul>
</li>

3.5 Snel testen

  • Verklein het venster → hamburgerknop zichtbaar? In/uitklappen oké?
  • Logo zichtbaar en linkt naar /? (Pas pad aan op je testsysteem.)
  • Bij fixed-top → verdwijnt je titel niet onder de navbar?
  • Op elke pagina precies één .active link.

Checklist

  • Navbar + SVG-logo staan correct en schalen netjes.
  • Pad naar logo.svg klopt (denk aan relatieve paden in je cursusmap).
  • Mobile menu werkt; active state ingesteld per pagina.