So erstellst du eine Carrd mobile responsive Navbar (3 Methoden)

Hinweis: Diese Anleitung enthält Referral-Links. Wenn du darüber kaufst, erhalte ich möglicherweise eine Provision – ohne zusätzliche Kosten für dich.

Eine Carrd mobile responsive Navbar ist eines der ersten Dinge, die du hinzufügen willst, wenn deine Website mehr als eine Sektion hat. Carrds eingebaute Header-Optionen funktionieren auf dem Desktop gut, liefern dir aber kein Hamburger-Menü auf kleineren Bildschirmen — und das ist Pflicht für jede moderne Website.

Diese Anleitung deckt drei Ansätze ab: ein Custom-HTML/CSS-Embed (am günstigsten, meiste Kontrolle), native Carrd-Elemente (überhaupt kein Code) und Third-Party-Plugins (Drop-in-Features). Jeder hat Trade-offs bei Kosten, Komplexität und Flexibilität. Wenn du Carrd noch nicht gewählt hast, kannst du unseren Carrd.co-Review lesen oder es unten kostenlos testen.

Einige Carrd-Tutorials

Bevor wir eintauchen, hier verwandte Carrd-Anpassungs-Guides, die gut zu einer responsiven Navbar passen:

• Einen Sticky Header zu Carrd hinzufügen lässt die Navbar beim Scrollen sichtbar bleiben
• Ein Floating-Menü zu Carrd hinzufügen ist ein anderes Navigationsmuster, das sich lohnt
• Ein Seitenmenü zu Carrd hinzufügen ist ein alternatives Layout für Websites mit viel Navigation
• Smooth Scroll und Anker-Links zu Carrd hinzufügen passt direkt zu ankerbasierten Nav-Links

Was du brauchst

Welcher Ansatz passt zu dir?

Kurzer Entscheidungsguide. Wähle den Pfad, der zu deiner Situation passt:

Methode 1: Custom-HTML/CSS-Embed (codebasierte Carrd-Navbar)

Das ist der Ansatz, den ich nutze. Er gibt dir die meiste Kontrolle über das Verhalten und Styling des Carrd-Hamburger-Menüs und braucht nur Pro Standard (19 $/Jahr). Der Trade-off: Du bearbeitest HTML/CSS direkt.

Wie der Checkbox-Hack funktioniert

Der Toggle-Mechanismus nutzt eine versteckte Checkbox und ein <label>-Element. Wenn du das Label klickst (als Hamburger-Icon gestylt), toggelt es die Checkbox. CSS zielt dann über #menu-toggle:checked ~ .menu auf das Geschwister-Menü. Das ~ ist der General-Sibling-Kombinator, also „wähle .menu, das ein Geschwister nach der angehakten Checkbox ist.”

Es ist ein reines CSS-Toggle. Kein JavaScript für das Öffnen/Schließen selbst nötig. Das JS handhabt nur das Schließen des Menüs, wenn du einen Nav-Link oder den Close-Button klickst.

Der Checkbox-Hack ist ein betagtes Muster (er hat Barrierefreiheits-Trade-offs, die wir unten behandeln), funktioniert aber zuverlässig in Carrds Embed-Umgebung, wo du nicht einfach einen <button>-Toggle mit sauberem ARIA-State-Management injizieren kannst.

Schritt 1: Den Container einrichten

Füge in Carrds Editor ein Container-Element mit 2 Spalten hinzu. Teile es grob 25%/75%:

• Erste Spalte: Dein Logo (ein Image- oder Text-Element)
• Zweite Spalte: Das Embed-Widget (nächster Schritt)

Wähle eine Hintergrundfarbe für den Container, die zu deinem Header-Design passt. Das beeinflusst den Navbar-Code selbst nicht.

Wenn deine Website Section Breaks nutzt, um Inhalt in separate „Seiten” zu splitten, platziere diesen Container über einem Header-Marker, damit er auf jeder Sektion erscheint. Sonst versteckt Carrd ihn zusammen mit seiner Sektion, wenn ein Besucher einen Link zu einer anderen klickt.

Schritt 2: Ein Embed-Widget hinzufügen

Füge in der zweiten Spalte ein Embed-Element hinzu. Benenne es etwa navbar-embed.

Schritt 3: HTML, CSS und JavaScript hinzufügen

Unten ist der komplette aktualisierte Code. Er fixt mehrere Bugs aus der Original-Version, fügt Barrierefreiheits-Attribute hinzu, nutzt eine flüssige max-height-Transition statt display: none/block und scopet den CSS-Reset, damit Carrds eingebaute Styles nicht brechen.

<style>
  :root {
    --mbm-main-font: inherit;
    --mbm-font-size-base: 18px;
    --primary-color: #200eed;
    --secondary-color: #fff;
  }

  /* Scoped reset — only affects this nav and its children */
  .mbm-nav, .mbm-nav * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Navigation styling (desktop) */
  .mbm-nav {
    position: relative;
    color: var(--secondary-color);
    background-color: var(--primary-color); /* blue header */
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: var(--mbm-main-font);
    font-size: var(--mbm-font-size-base);
  }

  .menu {
    list-style: none;
    display: flex;
  }

  .menu li a {
    display: block;
    color: var(--secondary-color);
    text-decoration: none;
    padding: 10px 15px;
    position: relative;
  }

  .menu li a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease-in-out;
  }

  .menu li a:hover::after {
    width: 100%;
    left: 0;
  }

  /* Hamburger styling */
  .hamburger {
    display: none;
    cursor: pointer;
  }

  .hamburger .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--secondary-color);
    margin: 5px 0;
  }

  /* Hide checkbox */
  #menu-toggle {
    display: none;
  }

  /* Close button — hidden by default */
  .close-button {
    display: none;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--secondary-color);
    cursor: pointer;
    z-index: 1001;
    padding: 5px;
  }

  /* Mobile styles */
  @media (max-width: 768px) {
    .hamburger {
      display: block;
    }

    .menu {
      position: absolute;
      width: 100%;
      top: 100%;
      left: 0;
      background-color: var(--primary-color);
      text-align: center;
      padding: 0;
      z-index: 999;
      flex-direction: column; /* not in a row — stacked vertically */
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden; /* closed menu can't be clicked or tabbed into */
      transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.4s ease-in-out, visibility 0.4s;
    }

    .menu li {
      width: 100%;
    }

    .menu li a {
      padding: 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .menu li:last-child a {
      border-bottom: none;
    }

    /* Show menu when checkbox is checked */
    #menu-toggle:checked ~ .menu {
      max-height: 500px;
      padding: 20px 0;
      opacity: 1;
      visibility: visible;
    }

    /* Show close button + hide hamburger when open */
    #menu-toggle:checked ~ .close-button {
      display: block;
    }

    #menu-toggle:checked ~ .hamburger {
      visibility: hidden;
    }
  }
</style>

<nav class="mbm-nav" role="navigation" aria-label="Main navigation">
  <input type="checkbox" id="menu-toggle" />
  <label for="menu-toggle" class="hamburger" aria-label="Toggle menu">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
  </label>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#testimonials">Testimonials</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
  <button type="button" class="close-button" aria-label="Close menu">×</button>
</nav>

<script>
  // Close menu when close button is clicked
  document
    .querySelector(".mbm-nav .close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

  // Close menu when a nav link is clicked
  document.querySelectorAll(".mbm-nav .menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  });
</script>

Die Navbar anpassen

Schnellreferenz für übliche Änderungen:

• Farben: Bearbeite --primary-color und --secondary-color im :root-Block
• Font: Setze --mbm-main-font auf einen Font-Family-Wert (z. B. 'Inter', sans-serif)
• Menüpunkte: Ersetze die <li><a href="...">-Einträge durch deine eigenen Sektions-Links
• Breakpoint: Ändere 768px in der @media-Query, um eine andere Bildschirmbreite zu treffen
• Dropdown-Position: top: 100% in der mobilen .menu-Regel hält das Dropdown direkt unter der Navbar. Ändere es nur für einen Versatz
• Transition-Geschwindigkeit: Ändere 0.4s in transition: max-height 0.4s ease-in-out

Wenn deine Nav-Links auf Sektionen derselben Seite zeigen, füge Smooth Scrolling für Carrd-Anker-Links für eine polierte UX hinzu.

Hinweise zur Barrierefreiheit

Methode 2: Native Carrd-Elemente (No-Code-Navigation)

Wenn du keinen Code anfassen willst, können Carrds eingebaute Elemente den Job erledigen. Der Trick sind die Visibility-Einstellungen, um unterschiedliche Navigationselemente auf Desktop vs. Mobil zu zeigen. Desktop bekommt eine Button-Reihe; Mobil bekommt ein Hamburger-Icon, das zu einer Vollbild-Menü-Sektion springt.

Wie es funktioniert

Carrd lässt dich die Element-Sichtbarkeit pro Gerätetyp setzen. Du erstellst zwei Versionen deiner Navigation (eine für Desktop, eine für Mobil) und Carrd zeigt die richtige basierend auf der Bildschirmgröße.

Die Desktop-Navigation einrichten

1. Füge in deinem Header-Container ein Buttons-Element hinzu
2. Setze Layout auf Row (horizontales Button-Layout)
3. Setze Visibility auf Desktop Only
4. Füge deine Nav-Link-Buttons hinzu (Home, About, Contact usw.). Jeder verlinkt auf eine Sektion via #section-name

Den mobilen Hamburger-Toggle erstellen

1. Füge ein Icon-Element zum selben Container hinzu (wähle ein Hamburger-/Menü-Icon aus Carrds Icon-Bibliothek)
2. Setze die URL des Icons auf #menu (das verlinkt auf eine Sektion, die du als Nächstes erstellst)
3. Setze Visibility auf Mobile Only

Die Mobile-Menü-Sektion bauen

1. Füge einen Section Break an der Stelle in deiner Seite hinzu, wo das mobile Menü erscheinen soll. Benenne ihn menu (das erzeugt das #menu-Ankerziel)
2. Füge innerhalb dieser Sektion ein Buttons-Element mit Layout: Column (vertikale Buttons) hinzu
3. Füge deine Nav-Link-Buttons hinzu — dieselben Links wie die Desktop-Version
4. Füge ein Close-Icon hinzu (X-Symbol) mit der URL browser:back — das nutzt Carrds eingebauten URL-Typ, um in der Browser-History zurückzugehen, was das Menü effektiv schließt
5. Füge ein Header-Marker-Control hinzu, damit der Navigations-Header auf jeder „Seite” deiner Carrd-Website erscheint

Zur Referenz: Carrd unterstützt diese URL-Typen in Buttons und Icons: #section-name, browser:back, section:next, section:previous und browser:top.

Ein kostenloses Template, das diesen Ansatz implementiert, ist verfügbar: Mobile-Navbar-Carrd-Template kostenlos von Jason Leow (erfordert Pro Plus).

Pro, Contra und Plan-Anforderungen

Pro:

• Überhaupt kein Code — alles wird visuell in Carrds Builder bearbeitet
• Änderungen sind sofort in der Editor-Vorschau sichtbar
• Keine externen Abhängigkeiten

Contra:

• Erfordert Pro Plus (49 $/Jahr) für Visibility-Einstellungen
• Mehr Setup-Schritte (7 Hauptschritte vs. 3 beim Code-Ansatz)
• Nicht natürlich sticky — braucht extra Arbeit, um beim Scrollen fixiert zu bleiben
• Keine animierte Hamburger-zu-X-Transition
• Das browser:back-Schließverhalten kann unzuverlässig sein, wenn der Nutzer über einen externen Link auf die Seite kam

Für ein anderes No-Code-Navigationsmuster schau dir außerdem an, wie man ein Floating-Menü zu Carrd hinzufügt.

Methode 3: Carrd-Navigations-Plugins (No-Code, Extra-Features)

Wenn du eine polierte Navbar ohne Code-Schreiben willst und der native Ansatz zu limitiert wirkt, füllen Third-Party-Plugins die Lücke. Sie sind bezahlt, aber gut gewartet und speziell für Carrd designed.

Nav Bar Plugin

Das Nav Bar Plugin von Jason’s Plugins fügt deiner Carrd-Website ein responsives Hamburger-Menü hinzu. Es handhabt den mobilen Toggle, Styling und Layout — du konfigurierst nur deine Menüpunkte. Funktioniert auf Pro Standard (19 $/Jahr) plus Plugin-Kosten.

Mega Nav Bar

Die Mega Nav Bar fügt Multi-Level-Dropdown-Support hinzu. Das ist Overkill für eine simple 4-Link-Nav, aber wenn deine Carrd-Website viele Seiten oder eine komplexe Informationshierarchie hat, ist es die sauberste Option, ohne es selbst zu bauen.

Kostenloses Visibility-Control-Plugin

Das Visibility-Control-Plugin ist kostenlos und nutzt eine visCtrl()-JavaScript-Funktion, um native Carrd-Elemente gerätebasiert zu zeigen/verstecken. Das repliziert effektiv die Pro-Plus-Visibility-Einstellungen auf einem Pro-Standard-Plan — nützlich, wenn du Methodes-2-Ansatz willst, aber nicht für Pro Plus zahlen möchtest.

Andere nützliche Carrd-Plugins sind das Carrd-Tabs-Plugin für tabbed Content und das Carrd-Accordion-Plugin für FAQ-Sektionen.

Methoden-Vergleich: Welcher Carrd-Navbar-Ansatz passt zu dir?

Mein Standard: Methode 1 (eigener Code), wenn du dich beim Copy-Pasten von HTML wohlfühlst. Sie ist die günstigste, flexibelste und einzige Option, die einen animierten Hamburger-Toggle unterstützt. Nutze Methode 2, wenn du nie Code sehen willst und Pro Plus nichts ausmacht. Nutze Methode 3, wenn du Multi-Level-Dropdowns brauchst oder ein gewartetes Plugin willst.

So machst du deine Carrd-Navbar sticky

Der Custom-Code-Ansatz (Methode 1) funktioniert mit einem Sticky Header. Wenn deine Navbar oben im Viewport gepinnt bleiben soll, während Nutzer scrollen, folge dem Sticky-Header-Tutorial für Carrd.

Der native Ansatz (Methode 2) unterstützt sticky positioning nicht nativ — du bräuchtest zusätzliches Custom CSS, was den Zweck des No-Code-Ansatzes etwas untergräbt.

Troubleshooting häufiger Carrd-Mobile-Navbar-Probleme

document.addEventListener("DOMContentLoaded", function () {
  document
    .querySelector(".mbm-nav .close-button")
    .addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });

  document.querySelectorAll(".mbm-nav .menu a").forEach(function (link) {
    link.addEventListener("click", function () {
      document.getElementById("menu-toggle").checked = false;
    });
  });
});

Deine Carrd responsive Navbar testen

Häufig gestellte Fragen

Mehr Carrd-Anpassungen

Wenn du deine Carrd-Website über die Navbar hinaus ausbaust, decken diese Guides andere übliche Ergänzungen ab:

• Einen Zurück-nach-oben-Button zu Carrd hinzufügen
• Einen Cookie-Hinweis zu Carrd hinzufügen
• Eine Preistabelle zu Carrd hinzufügen
• Ein Popup-Modal zu Carrd hinzufügen
• Einen Dark-Mode-Umschalter zu Carrd hinzufügen
• Einen Testimonial-Slider zu Carrd hinzufügen
• Einen WhatsApp-Chat-Button zu Carrd hinzufügen
• Countdown-Timer-Styling zu Carrd hinzufügen
• Eine eigene Domain zu Carrd hinzufügen