Neu Custom Breakpoint mobile Navigation

omed

Mitglied
6. Januar 2022
4
0
Hallo zusammen,

wir verwenden das Nova Theme. Im Standard springt das Mobile-Menü ja bei 992px an. Wir würden gerne schon bei 1092px starten. CSS-technisch haben wir es schon soweit umgebaut und einige eigene Media Queries gesetzt, allerdings stehen jetzt einige container vermutlich per javascript >992px noch auf "disabled".

Gibt es eine saubere Lösung das "Anspringen" des Mobile Menus zu definieren ohne CSS Stückwerk zu basteln? In den Variablen habe ich den md Breakpoint bereits auf 1092px geändert, das scheint aber nicht wirklich etwas zu ändern.

Ich wäre dankbar, wenn mir jemand weiterhelfen könnte! :)
 

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
1.315
449
Hallo,

es werden auf jeden Fall auch im Javascript nochmal breakpoints definiert, in der Datei NOVA/js/app/globals.js
Ich habe jetzt aber nicht probiert ob es schon reicht die Zahl dort zu ändern.
Diese Variable wird auf jeden Fall benutzt um an ein paar stellen auf isMobile zu prüfen (NOVA/js/app/helpers.js):
JavaScript:
export let isMobile = () => window.innerWidth < globals.breakpoints.lg


Viele Grüße
Michael
 

webksde

Aktives Mitglied
30. August 2012
59
5
32457 Porta Westfalica
Da hast du Recht, die werden dort auch definiert:

JavaScript:
export const breakpoints = {
  xl: 1680,
  lg: 1100,
  md: 768,
  sm: 576
};

Nur leider scheint sich die Datei im Template nicht überschreiben zu lassen :/

HTML:
<JS Name="jtl3.js">
    <File Path="js/app/globals.js" override="true" />
</JS>

Nach Cache clear weiterhin /templates/NOVA/js/app/globals.js

Die globals.js aus dem custom theme wird einfach als weiterer JS File ergänzt und da breakpoints eine Konstante ist auch nicht überschreibbar.
Übersehe ich etwas?

Edit:

Ja, ich habe tatsächlch etwas übersehen ;) breakpoints ist zwar eine Konstante, aber das spielt keine Rolle, in window.globals lässt sich das Ganze ja überschreiben.
Folgendermaßen klappt es (mit einer eigenen globals_custom.js):

JavaScript:
const customBreakpoints = {
  xl: 1680,
  lg: 1100,
  md: 768,
  sm: 576
};
window.globals = {
  breakpoints: customBreakpoints
};

Was allerdings offenbar nichts bringt, weil die Nova Scripts vorher initialisiert werden.. mit den default Nova Werten.

Entsprechend ist die "Lösung" aktuell: Friss oder stirb? Mit den default Breakpoints leben, oder das halbe Nova JS im Custom Theme neu implmentieren?
 
Zuletzt bearbeitet: