Zur Übersicht

Elementor Shrink Header – Sticky und Shrink auf demselben Container

Der Header schrumpft beim Scrollen von 100 px auf 70 px.
Das Logo wird gleichzeitig von 80 px auf 55 px verkleinert.
Die Änderung erfolgt mit einer weichen Animation.

1. Elementor vorbereiten

  • Äußerster Header-Container: CSS-Klasse shrink-header
  • Logo-Widget: CSS-Klasse header-logo
  • Header in Elementor auf Sticky / Oben stellen.
  • Keine zusätzlichen Mindesthöhen oder vertikalen Innenabstände festlegen.

2. CSS

In das Custom CSS der Website einfügen:

/* HEADER NORMAL */
.shrink-header {
    height: 100px;
    min-height: 0;
    overflow: visible;

    transition:
        height 0.3s ease,
        box-shadow 0.3s ease,
        backdrop-filter 0.3s ease;
}

/* LOGO NORMAL */
.shrink-header .header-logo img {
    height: 80px;
    width: auto;
    max-height: none;
    object-fit: contain;

    transition: height 0.3s ease;
}

/* HEADER GESCHRUMPFT */
.shrink-header.shrink-active {
    height: 70px;
    min-height: 0;

    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* LOGO GESCHRUMPFT */
.shrink-header.shrink-active .header-logo img {
    height: 55px;
}

3. JavaScript

In Elementor Custom Code oder ein HTML-Widget einfügen:

<script>
document.addEventListener('DOMContentLoaded', function() {

    const header = document.querySelector('.shrink-header');

    if (!header) {
        return;
    }

    function updateHeader() {
        if (window.scrollY > 80) {
            header.classList.add('shrink-active');
        } else {
            header.classList.remove('shrink-active');
        }
    }

    updateHeader();
    window.addEventListener('scroll', updateHeader);

});
</script>

4. Anpassungsmöglichkeiten

  • Normale Headerhöhe: height: 100px
  • Geschrumpfte Headerhöhe: height: 70px
  • Normale Logohöhe: height: 80px
  • Geschrumpfte Logohöhe: height: 55px
  • Scroll-Schwelle: window.scrollY > 80
  • Animationsdauer: 0.3s

5. Wichtig: height statt min-height

Die CSS-Eigenschaft min-height definiert lediglich eine
Mindesthöhe. Wenn Elementor durch den Inhalt mehr Platz
benötigt, bleibt der Container entsprechend größer.

Auch transform: scale() ist für diesen Zweck ungeeignet:
Das Logo wird zwar optisch verkleinert, sein ursprünglicher
Platzbedarf im Layout bleibt aber erhalten.

Lösung: Die tatsächliche Höhe des Headers
und des Logos über height steuern. Dadurch können beide
Elemente beim Scrollen zuverlässig schrumpfen.

Hinweis: Bei verschachtelten Elementor-Containern
darauf achten, dass keine inneren Mindesthöhen die
Verkleinerung verhindern.