Wie Theme „Twenty Twenty-One“ mit „Sticky Header“?

Schnellste Lösung:
https://de.wordpress.org/plugins/twentig/

Hier eine Lösung, wo der Header mit etwas Abstand links und rechts aber ansonsten über die komplette Breite gesetzt wird:

header#masthead {
    position: fixed;
    z-index: 2;
    padding: 0 20px;
    width: 100%;
    max-width: var(--global--spacing-measure);
    background: rgba(237,236,234,0.8);
    -moz-box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    -webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
#main {
    padding-top: 100px;
}
@media screen and (max-width: 1100px) {
    .primary-navigation > .primary-menu-container, .primary-navigation-open .primary-navigation > .primary-menu-container {
        display: none;
    }
    .menu-button-container {
        display: inline-block;
        position: fixed;
    }    
}
@media screen and (max-width: 600px) {
    .site-branding .site-title {
        display: block;
        margin: 0;  
        font-size: 30px;
        padding: 0;
        text-align: center;
    }
    .site-branding {
        width: 100%;
        display: block;
        position: relative;
        float: none;
        text-align: center;
    }
    #masthead:not(.has-logo) .menu-button-container {
        display: block;
        float: none;
        width: 100%;
        position: relative;
        padding: 0;
    }
}

Alles andere wäre ein erheblicher Aufwand.

• Diese Antwort wurde geändert vor 2 Jahren, 8 Monaten von Angelika Reisiger. Grund: prefixes nachgereicht

Du hast bestimmt auch gesehen, dass ich für WP Meetup Dresden ’ne Webseite sticke?

Ja habe ich.

Danke, dir auch ein schönes Wochenende 🙂

Hallo Karl,
hast du denn bereits die Vorschläge bezogen auf die CSS-Regeln von @la-geek getestet?
Alternativ kann ich dir auch einen Lösungsansatz in einem Beitrag zu dem Thema bieten, den ich vor einiger Zeit erstellt habe. Den Beitrag habe ich mittlerweile bezogen auf den sticky header bei twenty twenty one auf der Grundlage meiner Lösung zu twenty twenty aktualisiert. In dem Beitrag habe ich auch auf eine Testseite von uns verwiesen, auf der ich die dort genannten CSS-Regeln umgesetzt habe.
Grundsätzlich kannst du den sticky header natürlich auch mittels einer media query entsprechend bei schmaleren Display deaktivieren. Das wäre aber m. E. gar nicht nötig.

Nachtrag: Wenn du das Thema bereits als gelöst markiert ist, geht das Thema in der Regel unter, weil wir ja davon ausgehen, dass das erledigt ist. Ich habe den Status daher gerade entsprechend geändert.
Viele Grüße
Hans-Gerd

• Diese Antwort wurde geändert vor 2 Jahren, 8 Monaten von Hans-Gerd Gerhards.
• Diese Antwort wurde geändert vor 2 Jahren, 8 Monaten von Hans-Gerd Gerhards.

hast du denn bereits die Vorschläge bezogen auf die CSS-Regeln von @la-geek getestet?

Die Ausgangsseite, auf deren Grundlage ich das CSS geschrieben hatte, wurde mittlerweile geändert, z. B. war der Titel letzte Woche noch einzeilig, die Breite des Headers war schmaler, es wurde inzwischen ein Rand unten hinzugefügt …

Von daher passt mein CSS-Code leider mittlerweile nicht mehr richtig ¯\(°_o)/¯ , der übrigens auch Media-Queries für die responsive Gestaltung enthält.

An dieser Stelle wieder der beliebte Hinweis, dass du WordPress, Themes und Plugins kostenlos und so wie sie sind zur Verfügung gestellt bekommst. Du hast die Freiheit, Themes nach deinen Wünschen zu gestalten, solltest dann aber über entsprechende Kenntnisse verfügen, einen Dienstleister beauftragen, Kompromissen eingehen oder nach einem anderem Theme suchen.

Es ist nicht Aufgabe des Supports, auf Zuruf Änderungen in CSS-Regeln umzusetzen (wobei dir Angelika hier bereits äußerst großzügig entgegen gekommen ist).

Wenn du eine Änderung vornehmen möchtest und dich nicht auskennst, ist das eine ganz tolle Gelegenheit, dir das notwendige Wissen anzueignen. Zu HTML und CSS gibt es gut gemachte Video-Tutorials, die dir in kürzester Zeit notwendiges Wissen vermitteln. Einen Crash-Kurs, der dir in 45 Minuten die Grundlagen von HTML beibringt, findest du z.B. hier: HTML Crash Course for Beginners – Website Tutorial.

Für Meetups reichen ganz einfache WordPress-Websites und niemand stellt hier den Anspruch, dass das Theme von Zwergen in einem tiefen Berg mit Kristallhämmerchen bearbeitet worden ist. Wenn du Wissen sammelst und das (gut dokumentiert) anschließend in die Website einbringen möchtest, ist das natürlich schön, aber es wird nicht erwartet.

„I’m so sorry“

Ach iwo, alles gut. War nur eine nachdrückliche kleine Erinnerung. 😉

Sieh’s mal so: wir haben hier ab und zu auch Teilnehmende, die darauf bestehen, dass wir Ihnen bei der Anpassung eines Themes helfen und dann auch recht selbstbewusst auf andere Threads verweisen, in denen wir das dann auch gemacht haben (weil gerade Zeit war und wir ja eigentlich gerne helfen).

Wir versuchen, hier im Rahmen der Moderation einige Standards einzuhalten, damit das Forum für alle Teilnehmenden (hoffentlich) eine Bereicherung bleibt. Und in diesem Sinne weise ich auch darauf hin, wenn ein Thema streng genommen nicht passt. Alles mit einem freundlichen Lächeln und in besten Absichten. Peace! ✌🏻