Hamburger Menü individuell einstellen

Karl
(@zittau)

vor 3 Jahren, 2 Monaten

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)

Moderator Bego Mario Garde
(@pixolin)

Moderator (nicht mehr aktiv)

vor 3 Jahren, 2 Monaten

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.

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

vor 3 Jahren, 2 Monaten
@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 vor 3 Jahren, 2 Monaten von Karl geändert.
- Diese Antwort wurde vor 3 Jahren, 2 Monaten von Karl geändert.
Moderator Hans-Gerd Gerhards
(@hage)

vor 3 Jahren, 2 Monaten

Hallo @zittau
kannst du das Thema dann bitte als gelöst markieren, wenn das Problem damit für dich behoben ist:

Die Option findest du rechts in der Sidebar. Danke.
Viele Grüße
Hans-Gerd

Moderator Bego Mario Garde
(@pixolin)

Moderator (nicht mehr aktiv)

vor 3 Jahren, 2 Monaten

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