Wenn du die Admin-Leiste in deinem Theme richtig beachten möchtest, musst du bei einem fixierten/absolut positionierten Header immer Anpassungen vornehmen. Mit CSS Custom Properties wird das wesentlich einfacher.

Gehen wir davon aus, dass du dein Menü in einem page-header-Element hast, das oben fixiert positioniert ist:

.page-header {
	inset-block-start: 0;
	inset-inline: 0;
	position: fixed;
	z-index: 10;
}Code-Sprache: CSS (css)

Das zeigt den Seiten-Header immer oben. Wenn allerdings die Admin-Leiste für angemeldete Benutzer aktiv ist, ist der Seiten-Header zumindest teilweise hinter der Admin-Leiste versteckt, da diese absolut oben positioniert ist.

Mit CSS Custom Properties kannst du die Höhe der Admin-Leiste auf Basis unterschiedlicher Bedingungen festlegen und dann in deinem page-header-Code nur eine einzelne Zeile anpassen, womit er sich immer automatisch anpasst.

Standardmäßig gibt es für Gäste keine Admin-Leiste, also wird deren Höhe in deiner Custom Property auf 0px gesetzt:

body {
	--my--size--admin-bar--height: 0;
}Code-Sprache: CSS (css)

Wenn die Admin-Leiste sichtbar ist, hat sie zwei unterschiedliche Größen. Am Desktop beträgt ihre Höhe 32px, während sie mobil (< 783px) 46px hoch ist. Da ich denselben Media-Query verwende, der für die mobile Version eine separate Höhe festlegt, überschreibe ich die Custom Property so:

.admin-bar {
	--my--size--admin-bar--height: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar {
		--my--size--admin-bar--height: 46px;
	}
}Code-Sprache: CSS (css)

Die Klasse admin-bar ist immer dann am body-Element verfügbar, wenn die Admin-Leiste sichtbar ist.

Im page-header-CSS kannst du dann diese Zeile verwenden:

.page-header {
	inset-block-start: var(--my--size--admin-bar--height);
}Code-Sprache: CSS (css)

Damit wird der Wert der Custom Property immer automatisch angepasst, je nachdem, ob die Admin-Leiste sichtbar ist oder nicht und abhängig von der Größe des Viewports.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert