Support » Allgemeine Fragen » Hamburger Menü individuell einstellen

  • Hallo,

    gibt es bitte eine Möglichkeit (Snippet oder Plugin), wie ich im Theme Twenty Twenty-Two (TT2) das sog. Hamburger Menü so einstelle, dass das Einfalten des Navigationsmenüs zu einem Menü-Icons stets für Tablets und Smartphones erfolgt? Für Desktoprechner jedoch nicht? Mit anderen Worten immer ab einer Bildschirmgröße von z. B. 1024 px erfolgt?

    Danke, Karl

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das ist eigentlich das voreingestellte Verhalten des Themes.

    Wenn du in Design > Editor die Website bearbeitest und auf das Navigationsmenü (1) klickst, wird in der Sidebar eine Einstellungsmöglichkeit Overlay-Menü angezeigt (2). Hier kannst du angeben, wann das gewählte Navigationsmenü als Overlay-Menü angezeigt wird – also als ein Hamburger-Button, der bei Anklicken ein überlagerndes Menü einblendet. Hier ist die Voreinstellung „Mobil“ – der Hanburger-Button wird also nur bei Mobilen Endgeräten eingeblendet, das normale Menü ausgeblendet.

    Screenshot Einstellungen
    (zum Vergrößern anklicken)

    Bonus-Tipp für Fortgeschrittene: Möchtest du auf mobilen Endgeräten ein reduziertes Menü verwenden, kannst du zwei Navigationsmenüs erstellen. Dem einen weist du dann die Overlay-Menü-Einstellung „Aus“ zu und gibst dem Navigationsmenü unter „Erweitert“ eine eigene CSS-Klasse. Dem anderen, reduzierten Menü weist du dann die Einstellung „Immer“ zu und gibst ihm ebenfalls eine eigene CSS-Klasse. Mit einer CSS-Regel mit Mediaqueries kannst du dann für kleine Bildschirme das Desktop-Menü ausblenden, für große Bildschirme das Mobil-Menü.

    Thread-Starter Karl

    (@zittau)

    @pixolin
    Danke für die ausführliche AW.

    Der zweite Lösungsvorschlag bringt für mich eventuell eine Lösung, denn mein Smartphone, mit seiner hohen Bildschirmauflösung, liefert im Hoch- bzw. Querformat unterschiedliche Anzeigen des Menüs aus.

    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Karl.
    • Diese Antwort wurde geändert vor 1 Jahr, 2 Monaten von Karl.

    Hallo @zittau
    kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:
    Gelöst
    Die Option findest du rechts in der Sidebar. Danke.
    Viele Grüße
    Hans-Gerd

    … denn mein Smartphone, mit seiner hohen Bildschirmauflösung, liefert im Hoch- bzw. Querformat unterschiedliche Anzeigen des Menüs aus.

    Das ist ja auch völlig korrekt.

    Responsive Design bedeutet nicht nur, ein Layout auf kleineren Bildschirmen zu verkleinern. Sonst lässt sich ein Navigationsmenü mit z.B. sieben Links nur noch mit einem Stift bedienen, aber nicht mit knubbeligen Fingern. Gleichzeitig ist ein Hamburger-Menü eigentlich nur eine Notlösung, die einer geringen Auflösung geschuldet ist.

    Möchtest du durchgängig für alle Bildschirmgrößen ein Hamburger-Menü verwenden, kannst du das in den Overlay-Menü-Einstellungen für den Navigationsmenü-Block festlegen.

Ansicht von 4 Antworten - 1 bis 4 (von insgesamt 4)
  • Das Thema „Hamburger Menü individuell einstellen“ ist für neue Antworten geschlossen.