Twenty Twenty: Sticky Header

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ü bzw. sticky header erweitert werden kann. In einem nächsten Beitrag werden wir dann zeigen, wie man Parallax-Effekte erzeugen kann.

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

Man kann mit wenigen Mitteln mit reinem CSS durchaus interessante Effekte einbauen. Das wollen wir in diesem Beitrag beschreiben.

Twenty Twenty mit Sticky Header

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 header (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 Header beim theme twenty twenty los

Rechts sind die CSS-Regeln für das Sticky Header 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
/* ------------------------------- */
/* 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;
}

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

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.

Ein Video zur Anleitung Sticky Header beim Theme Twenty Twenty

Um diesen Inhalt zu sehen, musst du erst die Cookies akzeptieren.

Individuelle Anpassungen beim Sticky Header

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 header (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 nicht nur bei Twenty Twenty, sondern 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, dieser 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.

Weitere interessante Beiträge rund um WordPress finden Sie hier

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.


Mehr erfahren auf dieser Webseite

Grafik: haurand.com


Zum Blog

Wir freuen uns über Ihre Kontaktaufnahme

8 Gedanken zu „Twenty Twenty: Sticky Header“

  1. Sehr cooles Tutorial, Vielen Dank für’s Teilen !
    Habt ihr auch einen Workaround wie bei Twenty Seventeen das menü auf dem Mobile Device oben bleibt? Für Desktop Anwendungen funktioniert das perfekt, auf dem Smartphone scrollt es bei mir leider raus 😉

    Besten Dank

    Antworten
    • Hallo,
      danke – freut mich 🙂
      Ich habe mir das gerade mal angesehen und es sollte bei twenty seventeen folgendermaßen funktionieren, wenn Du unter Design > Customizer > Zusätzliches CSS folgende CSS-Regeln eingibst:

      /* Navigationsleiste oben immer zeigen */
      .navigation-top {
      background: #fff;
      height: 70px;
      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;
      }

      /* oben kein Rand */
      @media screen and (min-width: 48em) {
      .admin-bar .site-navigation-fixed.navigation-top {
      top: 0px;
      }
      }

      /* Rand oben vergrößern, damit das Bild größer gezeigt wird */
      body:not(.title-tagline-hidden) .site-branding-text {
      margin-top: 80px;
      }

      /* Scrollbalken immer zeigen (verhindert das Springen einer Seite bei zu wenig Inhalt) */
      body {
      overflow-y: scroll;
      }

      ggfs. musst Du noch die eine oder andere Anpassung in Bezug auf margin oder padding je nach Bedarf vornehmen.
      Viel Erfolg 🙂

      Antworten
  2. danke für die tolle Anleitung, habe ich auch gleich ausprobiert. funktioniert ansich gut. Nur hauts mir dann bei der Anzeige am Handy oder Tablet alles ein wenig durcheinander. Das sieht dann nicht mehr wirklich schön aus. bzw. funktioniert auch nicht konstant.

    Hast du hier noch Tipps für einen Anfänger?

    Antworten
    • freut mich, dass Dir die Anleitung gefällt. Mich wundert allerdings, dass das bei Dir nicht funktioniert. Wir haben bereits einige Seiten auf diese Art mit dem Sticky Header ausgestattet, z. B. diese hier als Testseite. Auf Deiner Seite war das wohl aktuell noch kein sticky header, wenn ich das richtig sehe.

      Antworten

Schreibe einen Kommentar