Sticky Header zu Carrd hinzufügen (CSS-Tutorial)

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.

Ein Sticky Header hält deine Navbar am oberen Bildschirmrand gepinnt, während Besucher scrollen. Es ist ein Standard-Muster auf den meisten Websites, aber Carrd hat dafür keinen eingebauten Schalter. Du musst ihn selbst mit einem kleinen CSS-Snippet hinzufügen.

Diese Anleitung führt dich durch den kompletten Prozess. Du brauchst einen Pro-Standard-Plan (19 $/Jahr) oder höher, da das die niedrigste Stufe ist, die Custom-Code-Embeds unterstützt.

Mehr Carrd-Tutorials:

• Carrd-Cookie-Hinweis hinzufügen
• Preistabelle zu Carrd.co hinzufügen
• Carrd.co Review
• Akkordeon-FAQ-Dropdown zu Carrd.co hinzufügen
• Eigene Domain zu Carrd.co hinzufügen
• Responsive Carrd.co-Mobile-Navbar

Die komplette Liste der Carrd-Plugins, -Themes und -Tutorials findest du auf carrdme.com.

Voraussetzungen

Beide Pläne funktionieren. Der Unterschied ist, wie du die Container-ID findest – mehr dazu in Schritt 2.

So fügst du einen Sticky Header zu Carrd hinzu

1. Seiten-Padding auf null setzen

Öffne deine Carrd-Website im Editor und klicke das Page-Element. Setze in seinen Appearance-Einstellungen vertikales und horizontales Padding auf 0.

Wenn du das überspringst, hat die fixierte Navbar falsche Abmessungen und sitzt nicht bündig an den Seitenrändern.

2. Die Container-ID herausfinden

Deine Navbar-Elemente sollten in ein Container-Element gewrappt sein. Du brauchst die ID dieses Containers, um ihn per CSS anzusprechen.

Pro-Plus-Nutzer: Öffne die Container-Einstellungen, gehe zum Advanced-Settings-Tab und setze eine eigene ID (z. B. navbar). Nutze diese ID im CSS unten.

Pro-Standard-Nutzer: Du kannst keine eigenen IDs setzen, aber du kannst die automatisch generierte finden. Öffne deine veröffentlichte Website, rechtsklicke deinen Navbar-Container, wähle Untersuchen und suche nach einer ID wie container01 oder container02 auf dem <div>-Element. Das Video oben zeigt diesen Prozess im Detail.

3. Den CSS-Code hinzufügen

Füge ein neues Embed-Element zu deiner Carrd-Website hinzu. Setze den Type auf Code und den Style auf Hidden und Head. Füge dann eines der Snippets unten ein.

Sticky auf allen Bildschirmgrößen

<style>
  #container01 {
    position: fixed !important;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0 !important;
  }
</style>

Sticky nur auf Bildschirmen breiter als 600 px

<style>
  @media screen and (min-width: 600px) {
    #container01 {
      position: fixed !important;
      z-index: 99;
      top: 0;
      left: 0;
      width: 100%;
      margin-top: 0 !important;
    }
  }
</style>

Ersetze #container01 durch deine echte Container-ID.

Was die Eigenschaften tun:

• position: fixed – nimmt das Element aus dem normalen Fluss und pinnt es an den Viewport.
• !important – überschreibt Carrds Standard-Positionierungs-Styles.
• z-index: 99 – hält den Header über anderem Inhalt.
• top: 0; left: 0 – verankert ihn an der oberen linken Ecke.
• width: 100% – sorgt dafür, dass er die volle Viewport-Breite überspannt. Ohne das könnte der Header nicht die gesamte Seite abdecken.
• margin-top: 0 !important – Carrd fügt jedem Element außer dem ersten in einer Section oberen Abstand hinzu. Wenn dein Navbar-Container nicht der erste ist, würde dieser Abstand eine Lücke über der gepinnten Leiste lassen.

4. Einen Spacer unter dem Header hinzufügen

Wenn du ein Element auf position: fixed setzt, wird es aus dem normalen Dokumentenfluss entfernt. Das bedeutet, der Inhalt darunter rutscht nach oben und versteckt sich hinter der Navbar.

Um das zu fixen, füge ein Divider-Element direkt nach deinem Header-Container hinzu. Setze seinen oberen Abstand grob auf die Höhe deiner Navbar. Du kannst das separat für Desktop und Mobile in den Appearance-Einstellungen des Dividers anpassen.

Alternativ kannst du dem nächsten Container unter dem Header oberes Padding geben, aber ein Divider gibt dir mehr Kontrolle über responsive Abstände.

5. Speichern und testen

Veröffentliche deine Änderungen und prüfe das Ergebnis:

• Bleibt der Header beim Scrollen oben kleben?
• Überspannt er die volle Seitenbreite?
• Ist der Inhalt darunter sichtbar (nicht hinter dem Header versteckt)?
• Scrollt der Header auf Mobile normal weg (falls du das responsive Snippet genutzt hast)?

Troubleshooting

Header überspannt nicht die volle Breite: Stelle sicher, dass left: 0 und width: 100% in deinem CSS stehen. Prüfe außerdem, dass das Seiten-Padding auf 0 steht (Schritt 1).

Inhalt versteckt sich hinter dem Header: Du brauchst einen Spacer. Füge einen Divider mit passendem oberen Abstand hinzu oder gib dem nächsten Element padding-top.

Header flackert oder springt beim Laden: Das kann passieren, wenn Carrds Seiten-Lade-Animation mit position: fixed kollidiert. Die Animation bewegt die Seite mit einem CSS-Transform, und ein fixiertes Element innerhalb eines transformierten Elternteils bewegt sich mit, bis die Animation endet. Schalte die Lade-Animation der Seite in den Page-Element-Einstellungen aus.

Header überlappt auf Mobile, sieht aber zu hoch aus: Nutze die @media-Version des CSS, um das Sticky-Verhalten auf kleinen Bildschirmen zu deaktivieren, oder reduziere das Padding des Containers im mobilen Layout.

z-index scheint nicht zu funktionieren: Versuche, den z-index-Wert zu erhöhen (z. B. 9999). Wenn andere Elemente den Header immer noch verdecken, prüfe per Inspect, ob ein Elternteil deines Containers ein transform oder eine opacity unter 1 hat (meist von einer Animation). Beides fängt den z-index des Headers in diesem Elternteil ein.

Wann du stattdessen Carrds eingebauten Header Marker nutzen solltest

Carrd hat ein natives Header-Marker-Control, das eine Header-Region auf jeder Section sichtbar macht. Wenn du Sections nutzt und nur brauchst, dass der Header auf allen Seiten erscheint (nicht beim Scrollen kleben bleibt), ist der Header Marker die einfachere Lösung – kein eigener Code nötig.

Nutze den Sticky-CSS-Ansatz, wenn der Header beim Scrollen durch eine lange Single-Page-Website oben im Viewport gepinnt bleiben soll.

Beides kombiniert sich auch. Auf einer Website mit Sections verschwindet ein Navbar-Container, der innerhalb einer Section platziert ist, sobald der Besucher zu einer anderen Section wechselt, weil Carrd inaktive Sections versteckt. Platziere den Navbar-Container in der Header-Region (per Header Marker) und wende das Sticky-CSS darauf an – dann bleibt er auf jeder Section gepinnt.