ich versuche jetzt schon einen halben Tag lang eine Änderung in den Breakpoints zu machen. Irgendwie will mir das nicht gelingen. Vielleicht seht ihr auf Anhieb meinen Denkfehler.
Das will ich erreichen:
Das Mobile-Menü soll auch bei tabletViewportWidth und das normale Menü erst ab tabletLandscapeViewportWidth dargestellt werden.
Das habe ich gemacht:
Aus dem Responsive Theme kopierte ich die jquery.shopware-responsive.js ins Javascriptverzeichnis meines Themes.
In dieser kopierten js-Datei passte ich die Zeile 34 bzw. 35 an (// OffCanvas menu…) indem ich hinter ‘xs’, ‘s’ noch ein ‘m’ anfügte.
Nun nahm ich an, dass ich damit die Aktivierung des “Responsive Menüs” auch bei der Viewportgröße m (laut StateManager) hinkriege. Aber Pustekuchen. Tut sich nix. Es wird noch immer das normale Desktopmenü dargestellt.
Na ja… im Blick schon. Allerdings weiß ich nicht was ich damit machen soll.
Ich will ja im Grunde nicht die Größen (Breiten) der Viewports ändern - das würde ich in der structure.less machen - oder nicht? Ich will eigentlich nur erreichen, dass das Umschalten von einem zum anderen Menütyp quasi von einer zur nächsten Viewportgröße verlagert wird. Aktuell wird bei 48em auf Desktopmenü umgeschaltet. Ich möchte, dass die Umschaltung erst bei 64 erfolgt - laut JS-Datei also die Viewportgröße “m”. Das ändert doch im Grunde nichts an den Viewportgrößen selbst.
Oder bin ich da auf’m Holzweg?
P.S. Ich hab testweise mal die Größenangabe von @tabletViewportWidth auf höhere und niedrigere Werte gesetzt - ändert sich aber trotzdem nix.
Wenn es mich nicht irrt muss hier beides angepasst werden. Zum einen die media queries und diese .js Problem ist dann aber, dass das “burgermenu” sich in höheren Viewports nicht an der selben Stelle befindet weil noch andere Elemente ein/ausgeschalten sind.
Nachtrag: Kann es sein, dass du es genau umgekehrt mit block und none meintest? Die Klasse navigation-main bezeichnet das normale Desktopmenü, dass sollte im media query bis 48er Breite NICHT zu sehen sein. Hab’s also mal getauscht. Nun passiert folgendes: Das Desktopmenü ist, wie erwartet, weg. Die drei Striche des Mobilemenüs sind zu sehen, man kann sie auch anklicken. Allerdings öffnet sich dann nicht das Menü sondern nur das graue Overlay, sonst nix. Nach einem Blick in den Quellcode sehe ich, dass der Bereich, wo der Code des Menüs stehen müsste, leer ist. Also wird das Menü „technisch“ gar nicht ins Canvas geladen.
Ich habe dasselbe Problem und versucht, nach obiger Anleitung zu arbeiten. Leider nix. Keine Veränderung.
Das Mobile-Menü wird nach wie vor nicht geladen. Demnach ist es wohl nicht einfach damit getan, dass man den zusätzlichen Viewport im Statemanager definiert und die „navigation-main“ ausblendet. Scheint komplizierter zu sein… uff. Und das, obwohl vermutlich viele Websites daraufhin „gepimpt“ werden.
P.S. Ich habe die angepasste JS-Datei auch in der theme.php eingebunden. Testweise versuchte ich die Anpassung sogar mal in der originalen JS-Datei des ursprünglichen Responsive-Themes. Da klappt das aber auch nicht.
Anscheinend gibt’s noch mehr Leute, die es betrifft. Steht dafür nicht zufällig irgendwo eine Art Kurztutorial, Doku-Eintrag oder sowas zur Verfügung? Ich konnte nur bislang nix dazu finden. Habt ihr noch einen Tipp zum Thema? Wäre toll…
