Sticky Menü Twenty Twenty

Twenty Twenty aufpimpen: Sticky Menü

1. Teil: WordPress Theme Twenty Twenty mit ein paar CSS-Regeln aufpimpen

In diesem Beitrag wollen wir zeigen, dass relativ unproblematisch mit ein paar CSS-Regeln das WordPress-Theme Twenty Twenty um Optionen wie z. B. ein sticky Menü erweitert werden kann. In einem nächsten Beitrag werden wir dann zeigen, wie man Parallax-Effekte erzeugen kann.

Twenty Twenty mit Sticky Menue

Twenty Twenty ist ein WordPress-Theme, das zunächst ziemlich schlicht ist. Das Theme wurde mit der WordPress 5.3 erstmals als neues Standard-Theme veröffentlicht.

Das Standard-Theme für 2020 soll die Flexibilität des Block-Editors voll ausschöpfen. Zusätzlich soll das Theme u. a. die Möglichkeit bieten, dynamische Landing-Pages mit Layouts durch Nutzung der Gruppen- und Spaltenblöcke zu erstellen.

Wir hatten schon kurz nach Erscheinen des Themes die Idee, dieses Theme im Bedarfsfall einzusetzen. Immer wieder haben wir uns das Theme angeschaut und kamen dabei sehr häufig zu dem Schluss, lieber Themes wie z. B. Twenty Seventeen, Customizr oder Evolve einzusetzen, weil wir einfach nicht ganz überzeugt waren und uns einige Features wie z. B. ein „Sticky Menue“ fehlten.

Natürlich ist die Farbgebung nicht jedermanns Sache. Aber die Farben kann man natürlich weitestgehend mit Bordmitteln, also über den Customizer ändern (siehe Design > Customizer).

Twenty Twenty WordPress Theme
Grafik: WordPress.org

Allerdings kann man mit wenigen Mitteln mit reinem CSS durchaus interessante Effekte einbauen.

Das wollen wir in diesem Beitrag beschreiben.


Zunächst mal: Was ist ein „Sticky Menue“?

In der Regel hat man oben eine Menüzeile. Scrollt man runter, ist die Menüzeile weg. Das gefällt uns meistens nicht besonders. Sicher: Es gibt massenweise gute Plugins mit vielen Einstellungsmöglichkeiten, die man in dem Fall nutzen könnte. Es gibt sogar ein Plugin, das speziell für das Theme Twenty Twenty angeboten wird.

Wir haben speziell das zuletzt genannte Plugin getestet, haben aber aus verschiedenen Gründen das Plugin wieder deaktiviert.

Außerdem lässt sich ein Sticky Menue durchaus auch mit ein paar CSS-Regeln realisieren. Einen Ansatz haben wir dann z. B. hier gefunden.

Der Vorteil dabei besteht darin, dass Anpassungen relativ einfach realisiert werden können und man sich ein Plugin spart. Voraussetzung sind jedoch einige CSS-Kenntnisse, die sich aber durchaus im Rahmen halten.

Legen wir also mal mit dem Sticky Menue los

Rechts sind die CSS-Regeln für das Sticky Menue zu sehen, die wir jetzt erläutern wollen.

Bei Twenty Twenty muss die Klasse .header-inner.section-inner bezogen auf das Menue entsprechend angepasst werden.

Hinter der geschweiften Klammer werden die einzelnen Eigenschaften genannt. Hier zunächst mal die grundsätzlichen Eigenschaften, die an sich klar sind:

  • background: Hintergrundfarbe (hier #fff für weiß)
  • height: Höhe des Menüs
  • padding: Innenabstand des Menüs zum Rand
  • max-width: Maximalbreite des Menüs
  • width: Gesamtbreite des Menüs
  • position: damit wird das Menü fixiert
  • top, left, right: Verschiebung von der Außenkante zum umgebenden Elements (oben, links und rechts)
  • text-align: horizontale Textausrichtung

Eine Eigenschaft ist besonders wichtig: z-index.
Damit wird die Platzierung entlang der z-Achse festgelegt.

In diesem Fall wird mit dem relativ hohen Wert dafür gesorgt, dass das Menü im Vordergrund bleibt. Das funktioniert aber nur, wenn gleichzeitig im Block-Editor bei eingefügten Bildern auf einer Seite oder in einem Beitrag die Regel .stapel_hinten unter „Erweitert“ eingetragen wird (siehe Grafik).

Bei .stapel_hinten ist für z-index ein Wert von -1 eingetragen. Dieser Wert senkt die Priorität des Elements und sorgt dafür, dass in unserem Fall das Foto hinter das Menü „rutscht“, wenn man hochscrollt. Wenn die CSS-Regel nicht unter „Erweitert“ berücksichtigt wird, ist das Bild vor dem Menü. Das sieht einerseits nicht so gut aus und andererseits kann man dann keine Menüpunkte anklicken.

Das funktioniert übrigens ohne Probleme auch bei Videos, wenn man denn Videos einbinden möchte.

/* ------------------------------- */
/* sticky menue                    */
/* ------------------------------- */
.header-inner.section-inner {
    background: #fff;
    height: 100px;
    z-index: 170;
    padding: 20px;
    max-width: 100%;
    /* margin: 10px; */
    /* padding: 30px; */
    /* border-bottom: 1px solid #dadada; */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
}

/* ------------------------------- */
/* Grafiken im Stapel ganz hinten  */
/* - wichtig für sticky menue      */
/* ------------------------------- */
.stapel_hinten {
	z-index:-1;
}
sticky menue twenty twenty wordPress
Grafik: haurand.com

Und wo kommt das hin?

Diese Regeln kann man z. B. unter Design > Customizer > Zusätzliches CSS einbauen. Eine andere Möglichkeit besteht natürlich darin, dass man die Regeln in die style.css bei Verwendung eines Childthemes schreibt.

Sticky menue twenty twenty WordPress
Und so sieht das dann im Frontend aus

Ein Video zur Anleitung Sticky Menü

Individuelle Anpassungen beim Sticky Menü

Natürlich kann man je nach Bedarf die o. g. Einstellungen ändern (z. B. die Höhe des Menüs, etc.). Und sicherlich kann man noch weitere Effekte für das Sticky Menü vorsehen. So wäre z. B. vorstellbar, dass beim runterscrollen über die CSS Eigenschaft „transition“ die Menüzeile beispielsweise grau und leicht durchscheinend dargestellt wird. Da kann man sicher noch einige Dinge ganz individuell gestalten.

Grundsätzlich kann man diese Lösung auch bei jedem Theme verwenden, das (noch) keine Option für einen sticky header bzw. ein sticky Menü bietet. Dazu ist es nur notwendig, die entsprechende Klasse für das Menü zu finden. Diese Klasse kann man relativ einfach über die Developer Console ermitteln

Wir sind schon gespannt, was ihr dazu meint. Schreibt uns gerne einen Kommentar.

Was halten Sie davon?

Wir hoffen, der Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Wie geht es weiter? – Der Parallax-Effekt

In unserem nächsten Beitrag werden wir beschreiben, wie man (nicht nur) beim Theme Twenty Twenty mit CSS-Regeln Parallax-Effekte bei Bildern erzeugen kann.

Schreibe einen Kommentar

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