Sticky Header in Elementor erstellen

Positionierung

Die Einstellung unter Erweitert > Position beeinflusst das Verhalten des Headers maßgeblich. Hier gibt es zwei Varianten:

  1. Sie belassen die Position auf Vorgabe. Dadurch nimmt der Header im Layout die Höhe ein und verschiebt jeglichen Content um die Header-Höhe nach unten. Sie brauchen sich also keine Sorgen zu machen, ob beim Seitenaufruf die oberen Seiteninhalte vom Header überlagert werden.
  2. Sie wechseln die Position auf Absolut. Dadurch nimmt der Header keine Höhe im Layout ein und die Seiteninhalte rutschen unter den Header ganz nach oben. Das kann sinnvoll sein, wenn Sie beispielsweise einen Hero-Banner mit einer Höhe von 100 vh realisieren möchten. Hier ist es gewünscht, dass der Banner unter den Header rutscht.

Höhe begrenzen

Sollte Ihr Header eine Service- oder Informationszeile beinhalten, so empfehlen wir, diese nicht als sticky auszuzeichnen. Damit verschwindet diese beim Scrollen und hält den Header niedrig genug, damit dieser nicht stört. Damit die Unterscheidung klappt, müssen Service- und Menüzeile im Header auf oberster Ebene in zwei separaten Containern einsortiert sein.