Divi 5 Sticky Header: fixieren, verkleinern & Schatten beim Scrollen

Zusammenfassung: Ein Sticky Header im Divi-5-Theme-Builder ist mit vier Zeilen CSS erledigt — wenn man weiß, an welches Element sie gehören. Das naheliegende position: sticky auf der Header-Sektion scheitert nämlich an einer unscheinbaren Wrapper-Struktur; wir haben es nachgemessen. Dieser Artikel zeigt den funktionierenden Selektor, den Verkleinern-Effekt beim Scrollen (getestet: 132 px → 42 px) und erklärt, warum der CSS-Weg beim Theme-Builder-Header oft die robustere Wahl gegenüber den eingebauten Sticky-Optionen ist.

Die Falle zuerst: Warum position: sticky auf der Sektion nichts tut

Wer einen Theme-Builder-Header fixieren will, greift naheliegend zur Header-Sektion:

/* FUNKTIONIERT NICHT beim Theme-Builder-Header: */
.et-l--header .et_pb_section {
  position: sticky;
  top: 0;
}

Wir haben das auf unserer Divi-5.8-Testinstallation gemessen: Nach 500 px Scrollen war der so behandelte Header 449 px außerhalb des Viewports — er scrollte einfach mit, als wäre nichts gesetzt.

Der Grund liegt in Divis Markup: Der Theme Builder verpackt den Header in einen eigenen Wrapper (.et-l--header). position: sticky hält ein Element nur innerhalb seines Eltern-Containers fest — und dieser Wrapper ist exakt so hoch wie der Header selbst. Es gibt schlicht keinen Raum, in dem die Sektion „kleben” könnte. Ein klassischer Sticky-Stolperstein, der in Divi durch die Wrapper-Struktur eingebaut ist.

Die Lösung: den Wrapper selbst fixieren

Das CSS gehört eine Ebene höher — auf den Theme-Builder-Wrapper:

/* Sticky Header fuer den Divi-5-Theme-Builder-Header */
.et-l--header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
}
.et-l--header .et_pb_section {
  background: #ffffff !important; /* sonst scheint der Inhalt durch */
}

Wohin damit: Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS. Nachgemessen: Nach 500 px Scrollen sitzt das Menü damit stabil am oberen Rand.

Der z-index ist wichtig: Ohne ihn schieben sich Slider, Bilder oder Formulare beim Scrollen über den Header. Und der explizite Hintergrund verhindert, dass der Seiteninhalt durch einen transparenten Header hindurchscheint.

Verkleinern beim Scrollen (Shrink-Effekt)

Der Klassiker moderner Websites: Oben ist der Header großzügig, beim Scrollen wird er kompakt. Dafür kombinieren wir das Sticky-CSS mit einem kleinen Script, das ab 50 px Scrolltiefe eine Klasse setzt.

CSS (zusätzlich zum Sticky-Block oben):

.et-l--header .et_pb_section {
  transition: padding 0.3s ease, box-shadow 0.3s ease;
}
.et-l--header.header-verkleinert .et_pb_section {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

JavaScript (Divi → Theme-Optionen → Integration → head, mit <script>-Tags):

<script>
window.addEventListener('scroll', function () {
  var header = document.querySelector('.et-l--header');
  if (!header) return;
  header.classList.toggle('header-verkleinert', window.scrollY > 50);
});
</script>

Getestet auf Divi 5.8: Unser Test-Header schrumpft damit von 132 px auf 42 px Höhe, animiert über die CSS-Transition, plus dezenter Schatten als Tiefenwirkung.

Statt des Paddings kannst du in der verkleinerten Variante auch die Logo-Größe (.et_pb_menu__logo img { max-height: … }) oder die Hintergrundfarbe wechseln — das Muster bleibt gleich: Zustände über die Klasse header-verkleinert steuern, Übergänge der Transition überlassen.

Und die eingebauten Sticky-Optionen von Divi?

Divi bringt seit Version 4.6 eigene Sticky-Optionen mit (in den Element-Einstellungen unter „Erweitert”, inklusive eigener Sticky-Design-Zustände) — die gibt es auch in Divi 5 weiterhin. Für einfache Fälle sind sie einen Blick wert, gerade wegen der klickbaren Sticky-Stile ohne Code.

Warum wir beim Theme-Builder-Header trotzdem meist zum CSS greifen:

• Nachvollziehbarkeit: Vier Zeilen CSS im Theme-Options-Feld sind bei der Fehlersuche schneller geprüft als verschachtelte Element-Zustände im Builder.
• Wrapper-Problematik: Die eingebauten Optionen arbeiten auf Sektions-Ebene — beim Theme-Builder-Header führt genau das immer wieder zu dem oben beschriebenen Verhalten, je nachdem wie der Header aufgebaut ist.
• Kombinierbarkeit: Der Shrink-Effekt mit eigener Klasse lässt sich beliebig erweitern (Logo, Farben, Menü-Abstände) — im UI ist man auf die vorgesehenen Sticky-Stile begrenzt.

Der versteckte Nebeneffekt: Ankerlinks verschwinden hinter dem Header

Sobald der Header fixiert ist, entsteht ein Problem, das fast jeder erst spät bemerkt: Sprungmarken (Ankerlinks) landen unter dem Header. Klickst du auf einen „Nach oben”- oder Menü-Anker, der zu #leistungen springt, scrollt der Browser das Ziel exakt an den oberen Viewport-Rand — wo jetzt aber dein fixierter Header sitzt. Die Überschrift ist verdeckt.

Die saubere Lösung ist eine einzige CSS-Eigenschaft, scroll-margin-top, auf die Sprungziele:

/* Ankerziele um die Headerhoehe nach unten versetzen */
:target,
h1[id], h2[id], h3[id], .et_pb_section[id] {
  scroll-margin-top: 140px; /* etwa Headerhoehe + kleiner Puffer */
}

Der Wert entspricht ungefähr der Headerhöhe plus etwas Luft (bei unserem 132-px-Header also ~140 px). Nutzt du zusätzlich den Shrink-Effekt, orientiere dich an der großen Höhe — lieber etwas zu viel Abstand als eine halb verdeckte Überschrift. Dieser Fix kostet nichts und erspart dir später viel Rätselraten, warum Menü-Anker „daneben” springen.

Bonus: Header nur beim Hochscrollen zeigen

Ein beliebtes Muster großer Magazine: Der Header verschwindet beim Runterscrollen (mehr Platz zum Lesen) und kommt beim Hochscrollen sofort zurück. Das ist eine kleine Erweiterung des Shrink-Scripts — wir merken uns die letzte Scroll-Position und vergleichen die Richtung:

<script>
(function () {
  var header = document.querySelector('.et-l--header');
  if (!header) return;
  var last = 0;
  window.addEventListener('scroll', function () {
    var y = window.scrollY;
    // beim Runterscrollen ab 200px ausblenden, beim Hochscrollen zeigen
    header.style.transform = (y > last && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
    last = y;
  }, { passive: true });
})();
</script>

Dazu gehört einmalig transition: transform 0.3s ease; auf .et-l--header. Weniger ist hier oft mehr: Für die meisten Unternehmensseiten reicht der einfache Sticky-Header — dieses Muster lohnt sich vor allem bei langen Textseiten und Blogs.

Häufige Fehler

Der Header klebt nicht, obwohl das CSS drin ist

Prüfe den Selektor: position: sticky muss auf .et-l--header liegen, nicht auf .et_pb_section (die Falle vom Anfang). Zweiter Kandidat: Ein Elternelement mit overflow: hidden bricht Sticky-Verhalten — das passiert z. B. durch Theme-Optionen oder Plugins, die overflow-x: hidden auf body oder Container legen. In dem Fall hilft overflow: clip statt hidden auf dem betroffenen Element oder der Wechsel auf position: fixed plus Platzhalter-Abstand.

Inhalte rutschen beim Scrollen über den Header

z-index fehlt oder ist zu niedrig. Divi-Slider und -Animationen arbeiten teils mit eigenen Stacking-Kontexten — z-index: 999 auf dem Wrapper löst das in der Praxis zuverlässig.

Auf dem Handy springt der Header

Mobile Browser blenden die Adressleiste dynamisch ein und aus, dadurch feuern viele Scroll-Events kurz hintereinander. Setze die Schwelle im Script nicht zu knapp (50 px hat sich bewährt) und animiere über CSS-Transitions statt im JavaScript — dann bleibt die Bewegung ruhig.

Alle unsere Divi-5-Anleitungen und Problemlösungen an einem Ort: zum Divi-5-Tutorial-Hub.

Häufige Fragen

Warum funktioniert position: sticky bei meinem Divi-Header nicht?

In neun von zehn Fällen liegt das CSS am falschen Element: Beim Theme-Builder-Header muss es auf den Wrapper .et-l--header, nicht auf die Sektion — der Wrapper ist sonst der begrenzende Container, in dem die Sektion keinen Platz zum Kleben hat. Der zehnte Fall ist ein overflow: hidden auf einem Elternelement.

Geht ein Sticky Header in Divi 5 auch ohne Code?

Ja, über Divis eingebaute Sticky-Optionen in den Element-Einstellungen (seit Divi 4.6, auch in Divi 5). Für Theme-Builder-Header empfehlen wir dennoch den CSS-Weg aus diesem Artikel — er umgeht die Wrapper-Problematik und ist bei der Fehlersuche transparenter.

Funktioniert das Snippet auch mit dem Standard-Divi-Header (ohne Theme Builder)?

Der Standard-Header (#main-header) ist bei Divi von Haus aus fixiert bzw. über die Theme-Optionen steuerbar. Die Snippets aus diesem Artikel zielen auf den Theme-Builder-Header (.et-l--header), der diese Automatik nicht hat.

Wie ändere ich statt der Höhe die Farbe beim Scrollen?

Gleiche Mechanik, andere Eigenschaft: Ergänze in der Regel .et-l--header.header-verkleinert .et_pb_section z. B. background: #111 !important; und passe die Menü-Linkfarben für den Zustand an. Die Klasse wird vom selben Script gesetzt.

Quellen

• Eigene Tests auf einer Divi-5.8-Installation (Juli 2026) — Selektoren, Messwerte und Screenshots stammen aus dieser Umgebung
• Divi Sticky Options — Elegant Themes Blog
• MDN: position sticky