WordPress Twenty Seventeen – Menü für kleine Devices verbessern

WorpressMit meinem heutigen Beitrag will ich mal ein wenig das Terrain der Astrophysik und Computerwissenschaften verlassen und eine kleinen CSS-Trick mit Euch teilen, den ich beim Aufbau dieser Seite verwendet habe. Das Auge des Connoisseurs hat sicher schon scharfsichtig erkannt, dass die Webseite von Der Kristall auf dem WordPress Theme Twenty Seventeen basiert. Dieses Theme bietet eine gute Grundlage für den Aufbau einer sogenannten One Page Seite, d. h. einer Seite, die die wichtigsten Inhalte bereits auf der Startseite präsentiert, aber trotzdem klar in verschiedene Teilbereiche strukturiert ist. Desweiteren ist das Twenty Seventeen Theme von Haus aus responsive, passt sich also unterschiedlichen Bildschirmgrößen automatisch an. Also die perfekte Grundlage, um mein Buch angemessen vorzustellen.

Allerdings gefiel mir die vorgefertigte Lösung für das Menü bei kleinen Bildschirmen nicht. Das Menü rollt in der Standardkonfiguration nach oben raus und ist dann nicht mehr zugänglich. Nicht gut. Zum Glück kann man das aber ändern. Hierzu müsst Ihr nur ein wenig CSS Code in Euer Childtheme oder im Customizer hinterlegen:

/* Fixed menu at top for small and medium devices… */
@media screen and (min-width: 20em) and (max-width: 47.99em) {
    .navigation-top {
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        z-index: 7;
    }

    #post-7 .panel-image {
        display: none;
    }

    .site-branding {
        padding: 5em 0 2em;
    }
}

 
Wie Ihr seht, habe ich den Breakpoint auf 48em gelegt. Ab dieser Breite stellt Twenty Seventeen das Menü vollständig dar. Die erste CSS Regel setzt das Menü am oberen Rand des Bildschirms fest. Die zweite Regel blendet das Bild der ersten Teilseite aus, da die Seite ein Headerbild verwendet, zwei Bilder hintereinander sehen etwas komisch aus. Und die dritte Regel passt die Höhe des Headers aller Nicht-Startseiten an, damit das nun feststehende Menü berücksichtigt wird.

Twenty Seventeen MenuVoilà. Das Menü steht fest am oberen Rand und die Seite scrollt darunter durch.

Um den optischen Eindruck noch weiter zu verbessern, habe ich zusätzlich auch noch einen Parallax Scrolling Effekt aktiviert. Aber das ist etwas für einen der nächsten Beiträge.

Schreibe einen Kommentar

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