Ausgangssituation

Ein Elementor-Header besteht aus mehreren Bereichen. Der gesamte Header ist sticky, aber nur der untere Bereich mit Logo und Hauptmenü soll beim Scrollen schrumpfen.

Header (sticky)
├── header_top (Shop, Konto, Login, Warenkorb)
├── Trenner
└── shrink-header
    ├── Logo (header-logo)
    └── Hauptmenü

Der äußere Header-Container ist in Elementor unter Erweitert → Bewegungseffekte → Sticky → Oben fixiert.

Der innere Container erhält die CSS-Klasse shrink-header, das Logo-Widget die Klasse header-logo.

Funktionsweise

Beim Scrollen um mehr als 80 Pixel erhält der innere Header-Container die zusätzliche Klasse shrink-active.

Dadurch werden die Höhe des Containers und die tatsächliche Bildhöhe des Logos reduziert. Der obere Headerbereich bleibt unverändert.

1. CSS

/* 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;
}

2. JavaScript

Das JavaScript kann über Elementor Custom Code oder ein HTML-Widget eingebunden werden.

<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>

3. Werte anpassen

100px: normale Höhe des inneren Header-Containers
70px: Höhe nach dem Scrollen
80px: normale Logohöhe
55px: verkleinerte Logohöhe
window.scrollY > 80: Scrollposition, ab der der Header schrumpft
0.3s: Dauer der Animation

4. Warum height statt min-height?

Die Eigenschaft min-height legt nur eine Mindesthöhe fest. Benötigen die enthaltenen Elemente mehr Platz, wächst der Container trotzdem.

Mit height wird die gewünschte Containerhöhe direkt definiert. Voraussetzung ist, dass keine anderen Elementor-Einstellungen oder Inhalte eine größere Höhe erzwingen.

5. Warum das Logo nicht mit transform verkleinern?

Bei transform: scale(0.8) wird das Logo lediglich optisch verkleinert. Sein ursprünglicher Platzbedarf im Layout bleibt erhalten.

Wird stattdessen die tatsächliche Bildhöhe über height verändert, passt sich auch der Platzbedarf des Bildes an.

6. Wichtige Elementor-Einstellungen

Sticky wird ausschließlich auf dem äußeren Header-Container aktiviert.
Der innere Container erhält die Klasse shrink-header.
Das Logo-Widget erhält die Klasse header-logo.
Keine zusätzlichen Mindesthöhen oder festen Höhen in inneren Containern definieren, die das Schrumpfen verhindern.
Vertikales Padding prüfen, falls die tatsächliche Headerhöhe nicht den CSS-Werten entspricht.
Die Darstellung auf Desktop, Tablet und Smartphone getrennt prüfen.

Merksatz

Ein Sticky-Header muss nicht als Ganzes schrumpfen. Auch ein innerer Container lässt sich unabhängig verkleinern, während beispielsweise eine Shop- oder Serviceleiste darüber unverändert bleibt.

Entscheidend ist, die tatsächliche Höhe des Containers und des Logos zu verändern, statt nur Mindesthöhen oder optische Skalierungen einzusetzen.

Für diese Funktion ist kein zusätzliches WordPress-Plugin erforderlich.

Zur Übersicht

Elementor Shrink Header mit Sticky-Header im inneren Container