Support » Allgemeine Fragen » Wie Theme „Twenty Twenty-One“ mit „Sticky Header“?

  • Gelöst Zittau

    (@zittau)


    Hallo,
    hat jemand bitte den CSS-Code, damit ich im Theme „twenty twenty-one“ einen „Sticky Header“ bekomme?
    Danke, Karl

    • Dieses Thema wurde geändert vor 4 Monaten von Zittau.

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 14 Antworten - 1 bis 14 (von insgesamt 14)
  • Moderator Angelika Reisiger

    (@la-geek)

    Thread-Ersteller Zittau

    (@zittau)

    Danke Angelika für Deine blitzschnelle AW, auch für Deinen Hinweis im dtsch. Slack-Channel!!

    Ich es hatte auch mit diesem Plugin versucht, war aber nicht zufrieden:

    https://wordpress.org/plugins/options-for-twenty-twenty-one/

    LG aus Dresden,
    Karl

    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    Moderator Angelika Reisiger

    (@la-geek)

    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 4 Monaten von Angelika Reisiger. Grund: prefixes nachgereicht
    Thread-Ersteller Zittau

    (@zittau)

    @la-geek

    Auch dafür herzlichen Dank!

    Ich werd‘ mir’s ansehen.

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

    LG aus Dresden und ein schönes Wochenende,
    Karl

    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    Moderator Angelika Reisiger

    (@la-geek)

    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 🙂

    Thread-Ersteller Zittau

    (@zittau)

    Hallo,

    das Problem „Sticky Header“ im Theme „Twenty Twenty-One“ habe ich hier https://wpdrs.de leider doch noch nich‘ lösen können:,

    Ich habe die Plugins „Options for Twenty Twenty-One“ und „Twentig“ installiert und verwende sie beide, da sie sich mêiner Meinung gegenseitig ergänzen.

    „Sticky Header“ habe ich mit diesen probiert, jedoch wegen der enormen Beschneidung/Reduzierung des Smartphone-Bildschirmes wieder verworfen. Im Querformat (Smartphone) braucht der „Sticky Header“ nahezu die Hälte!! Ein Logo (Bild) im Header kommt für mich, wegen dem Nutzenwollen des „Dark Mode“, als Lösung nicht in Frage …

    Vielleicht wäre es eine Lösung, den „Sticky Header“ auf kleinen (Smartphone-)Bildschirmen automatisch deaktiviert zu lassen? Aber wie macht man das?

    Auch finde ich (in Firefox „F12“) nicht die CSS-Klasse, mit der ich den Titel/Untertitel „WordPress Meetup Dresden“ bei kleinen Bildschirmen nach oben verschieben könnte.

    Im voraus herzlichsten Dank,
    mit lieben Gruß aus Dresden,
    Karl

    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.

    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

    Thread-Ersteller Zittau

    (@zittau)

    @hage

    Danke für Deine AW.

    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.

    Ich würde diese Variante mal austesten wollen. Kannst Du mir bitte zeigen, wie/wo man dieses in der „media query“ aktiviert/ändert?

    Danke.

    LG, Karl

    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    Moderator Angelika Reisiger

    (@la-geek)

    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.

    Thread-Ersteller Zittau

    (@zittau)

    @la-geek

    Danke für Deine AW.

    Zwischeninfo:
    Ich habe ein Angebot, dass mir jemand direkt hilft. Denn mit dem Deaktivieren der Plugins nun würde dann die schicke Ausgabe der Beiträge (die Meetups) als Grit verloren gehen. Und gerade in diese habe ich mich doch total „verliebt“.

    Auch bin ich, was HTML, CSS, PHP und WordPress betrifft, kein Profi, sondern nur Autodidakt und habe ganz bestimmt hier noch so einige Defizite …

    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    Moderator Bego Mario Garde

    (@pixolin)

    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.

    Thread-Ersteller Zittau

    (@zittau)

    @pixolin

    „I’m so sorry“ — Danke für Deine nachdrückliche Erinnerung. Ich habe daraufhin meinen vorstehenden Beitrag abgeändert.

    Moderator Bego Mario Garde

    (@pixolin)

    „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! ✌🏻

    Thread-Ersteller Zittau

    (@zittau)

    @pixolin

    Trotzdem noch mal Asche auf mein Haupt, denn eigentlich hätte ich mit ’n biss’l Phantasiekugelanstrengen (also mit etwas Nachdenken) selber d’raufkommen können!! Zumal ich auch als Gast bei Deinem vortrefflichen Online-Vortrag „So funktioniert WordPress-Support“ am 14. Juli 2021 in Stuttgart mit dabei war …

    LG, Karl

    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
    • Diese Antwort wurde geändert vor 4 Monaten von Zittau.
Ansicht von 14 Antworten - 1 bis 14 (von insgesamt 14)