Header¶

Alle hier definierten Einstellungen beeinflussen die Kopfzeile der Website, sofern diese in den Layout-Bereichen eingestellt wurde.

Hintergrund¶

$header-bg

Über die Einstellung $header-bg kann der Hintergrund der Kopfzeile eingestellt werden

Verfügbare (S)CSS-Variablen

SCSS

$header-bg

CSS

var(--header-bg)

Höhe der Kopfzeile¶

$header-height $header-height-*

Über die nachfolgenden Einstellungen lässt sich die Höhe der Kopfzeile über die verschiedenen Breakpoints einstellen, sodass die Höhe auf verschiedenen Geräten variieren kann.

Größe der CSS-Datei

Sofern der selbe Wert über zwei Breakpoints eingestellt ist, wird nur der erste Wert als CSS-Variable in den :root geschrieben um CSS einzusparen.

Da die Höhe variabel ist, wird diese nur eine Custom property gesteuert, sodass der Zugriff jederzeit über den nachfolgenden Wert möglich ist:

var(--hdr-hght)

Verfügbare (S)CSS-Variablen

SCSS

$header-height
$header-height-xs
$header-height-s
$header-height-m
$header-height-l
$header-height-xl

CSS

var(--hdr-hght)

Exkurs: Header behaviour¶

Sowohl in den Layout- als auch in den Seiten-Einstellungen befindet sich im Abschnitt Layout die Option Header behaviour, welche entscheidet, wie sich die Kopfzeile auf der Seite verhalten soll.

Info

Jede der nachfolgend eingestellten Optionen führt dazu, dass die Kopfzeile jederzeit sichtbar ist. Mithilfe eines JavaScript-Snippets lässt sich diese Ein- bzw. Ausblenden. Tutorials für ein solches JavaScript lassen sich im Internet finden.

FixedUndocked

Ist diese Option ausgewählt, fixiert sich die Kopfzeile auf der Webseite.

Tip

Diese Option wird empfohlen, wenn die Kopfzeile über dem Inhalt der nachfolgenden Layout-Bereiche schweben soll.

Auch mit dieser Option wird die Kopfzeile auf der Webseite fixiert, der erste Artikel wird jedoch nicht überlagert.

Tip

Diese Option wird empfohlen, wenn die Kopfzeile jederzeit sichtbar sein soll, der Inhalt der nachfolgenden Layout-Bereiche aber nicht verdeckt werden soll.

Exkurs: Artikel-Höhe und Kopfzeilen-Höhe¶

Innerhalb von Artikeln lässt sich über die Option Article-Height die Höhe des Artikels auf eine Display-Höhe begrenzen bzw. vergrößern, sodass der Inhalt im gesamten Bereich sichtbar ist.

Damit die Höhe eines mit 100vh eingestellten Artikels (erster Artikel) die tatsächliche Bildschirmhöhe einnimmt, kann die Option Consider header aktiviert werden.

Info

Ist die Option Fixed auf der Seite ausgewählt, muss diese Option nicht eingestellt werden.

Abstand¶

$header-padding

Über die Option $header-padding kann der innere Abstand / Polster (padding) des Umschlags für die Kopfzeilen-Module eingestellt werden.

Info

Der Abstand des Navigations-Items beeinflusst die Höhe zusätzlich, sodass die Höhe der Kopfzeile eventuell angepasst werden muss.

Ausrichtung der Elemente¶

$header-alignment-vertical $header-alignment-horizontal

Alle sich in der Kopfzeile befindenden Module können über diese Einstellungen ausgerichtet werden.

Die vertikale Ausrichtung ($header-alignment-vertical) erlaubt die folgenden Optionen und folgt der Flexbox-Anweisung align-items¹ mit den Optionen:

Option	Beschreibung
`flex-start`	Oben
`center`	Mittig
`flex-end`	Unten
`baseline`	Achse

Die horizontale Ausrichtung ($header-alignment-horizontal) erlaubt die folgenden Optionen und folgt der Flexbox-Anweisung justify-content² mit den Optionen:

Option	Beschreibung
`flex-start`	Module werden zum Start ausgerichtet
`center`	Mittige Ausrichtung der Module
`flex-end`	Module werden zum Ende ausgerichtet
`space-between`	Abstand zwischen den Modulen
`space-around`	Aufteilung des freien Raums vor, zwischen und hinter den Modulen. Der Abstand des ersten und letzten Moduls ist zusammen so groß wie der Abstand zwischen den Modulen
`space-evenly`	Gleichmäßiger Abstand aller Module
`revert`	Reset

Tip

Das <header> Element wird durch das CSS-Framework auf display: flex gesetzt. Da sich Anweisungen von CSS-Grid teilweise mit denen von CSS-Flexbox überlagern, können die center und space-* Anweisungen weiterhin verwendet werden.

Der Header kann mit folgendem CSS im Skin auf CSS-Grid gestellt werden:

header > .inside {
  display: grid;
}

Align-Items auf css-tricks ↩
Justify-Content auf css-tricks ↩