Cassiopeia - Menü soll immer als Mobil-Menü angezeigt werden

  • Hab im Web und im Forum hier gesucht, aber nix zur Lösung gefunden:

    Meine neuen Joomla-Sites sollen kein anderes als nur ein MobilMenu bereit stellen. Der Sandwich-Button soll dazu an der Position "search" stehen (also oben rechts) und die Suchfunktion soll wegfallen. (Ich hab ja nur eine kleine Site.) Im frei gewordenen Raum steht dann das Signet zur Site.


    Wie kann ich dafür sorgen, dass das Menü nicht als normales Menü, und abhängig von screenwidth angezeigt wird, sondern immer als MobileMenü?

  • Wird wahrscheinlich in den Media-Querries gesteuert, ab wann da das Hamburgermenu angezeigt wird.

    Ab einer bestimmten Screengröße wird der entsprechende Code genutzt.

    Diesen kannst du dann ggf. auch für die größeren einbauen.

    Da die Positionen geändert werden sollen, kann es auch sonst noch Darstellungsprobleme geben, da die Positionen für bestimmte Funktionen auch entsprechend optimiert sind.

  • Astrid hat dies hier auch gelöst (HM immer sichtbar) und ich denke es ist Cassiopeia.

    Ein Banner ganz oben und die Navigation horizontal darunter
    Du hast kein Logo und es gibt auch keinen Text, der anstelle des Logos auf deiner Website passt. Dafür möchtest du ein Banner ganz oben auf…
    blog.astrid-guenther.de


    Im Link sind einige wertvolle Tips und ich denke, dass es nicht so schwer umzusetzen ist.

    astrid: villeicht kannst du helfen.

  • Hallo,


    es ist schon so, wie Lui_brempt sagt.


    WM-Loose: Kenne die Anleitung von astrid. Diese finde ich sehr gut.


    Der TE möchte aber:

    Wie kann ich dafür sorgen, dass das Menü nicht als normales Menü, und abhängig von screenwidth angezeigt wird, sondern immer als MobileMenü?

    Clemens-XS: Verstehen tue ich diesen Wunsch pers. nicht. :) Warum soll man die Menüs nicht sehen dürfen? Egal ob für große oder kleine Seite wie Du schreibst.


    Eine ev. Möglichkeit könnte das Template nature sein: https://j4.dr-menzel-it.de/


    Da kann man beim Modul > Erweitert einstellen:


    sähe dann so aus (Desktop):



    Liebe Grüße

    Christine

  • christine2 danke für die Erwähnung meines Templates, aber so wie in deinem Screenshot ist das Menü Modul nicht richtig konfiguriert, da ist ein Override von Cassiopeia ausgewählt und das funktioniert bei Nature nicht, weil ich Bootstrap nicht benutze.


    Man kann ein Override von Collapsible Dropdown machen und die Klassen (navbar-expand-md) ändern (dazu die Bootstrap Doku zu Rate ziehen). Eventuell ist mein Offcanvas alternatives Layout nützlich:

    Externer Inhalt gist.github.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

  • Hallo Viviana,

    christine2 danke für die Erwähnung meines Templates, aber so wie in deinem Screenshot ist das Menü Modul nicht richtig konfiguriert, da ist ein Override von Cassiopeia ausgewählt und das funktioniert bei Nature nicht, weil ich Bootstrap nicht benutze.

    irgendwie habe ich das dann auch bemerkt. Hab's halt versucht :)

    Man kann ein Override von Collapsible Dropdown machen und die Klassen (navbar-expand-md) ändern (dazu die Bootstrap Doku zu Rate ziehen). Eventuell ist mein Offcanvas alternatives Layout nützlich:

    Externer Inhalt gist.github.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    Zuerst war es da, dann nicht mehr da, jetzt doch nach Einloggen, sehe ich gerade.
    Ah, ist auf Github.


    Nehme an, mit diesem Override wäre das für den TE gewünschte Layout. Kann es jetzt nicht ausprobieren, da dann weg.


    Liebe Grüße

    Christine

  • Tja, da haben echte Fachleute geantwortet und ich verstehe nur "Bahnhof".

    Ich möchte lediglich in eine "Zeile", wie z.B. topbar oder banner das Signet am linken Rand beginnend veröffentlichen und am rechten Rand ein Sandwich-Menü platzieren.


    Und falls das nicht ohne großen Aufwand geht, könnte ich das Menü-Modul evtl. mit Z-Achse und CSS-Positionierung an die von mir gewünschte Position bekommen. Das Signet setze ich dann auf width 80% sodass immer Platz für das Sandwich-Menü bleibt.


    Eine andere Idee wäre, z.B. das MobileMenüCK einzusetzen. Hier fand ich aber heraus, dass es sich sozusagen mit dem vorhandenen Menü-Modul "verbindet" und so zusätzliche Einstellungen zulässt, die im MetisMenü nicht möglich sind. Die von mir gewünschte Positionierung ist damit ebenfalls ungeklärt.


    Auf jeden Fall möchte ich so wenig zusätzliche Erweiterungen installieren, wie möglich.


    Was tun?

  • WM-Loose Es ist sogar wahrscheinlich, dass ich mit irgendeinem dieser Frameworks meine Wünsche umgesetzt bekomme. Aber dann ist meine Joomla-Site eben nicht so schlank und einfach / übersichtlich / weniger anfällig bei Updates, als wenn ich das Standard-Template mit so wenig Erweiterungen wie möglich zusammen nutze.


    Ich kam jetzt auf die Idee, meinen Wunsch mittels "Modul in Modul" zu verwirklichen:

    Ich erstelle ein benutzerdefiniertes Modul, in dem ich das Signet platziere und neben das Signet, wie gewünscht, ein weiteres Modul lade, eben das Mobile-Menü. Dann kann ich dieses Modul-Set beliebig auf gewünschte Template-Positionen bringen wie eben z.B. topbar oder belowtop oder banner oder top-a usw.


    Aus der Joomla 3.x-Zeit fand ich zum Thema "Modul in Modul laden" diesen Thread hier:

    wobei darin auf zwei weitere Diskussionen verwiesen wird.


    Und hier noch ein Thread dazu: Modul in Modul laden


    Vielleicht lassen sich die dort beschriebenen Lösungsansätze auch in Joomla 4.x in Cassiopeia anwenden? – Wenn ja, hätte ich auch da wieder die Schwierigkeit, dass es mich technisch an meine Grenzen bringt. Aber vielleicht regt der o.g. Thread jemanden hier an, mir einen Tipp zur Umsetzung in Cassiopeia zu geben?

  • Eventuell ist mein Offcanvas alternatives Layout nützlich:

    Externer Inhalt gist.github.com
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

    Hab mal das alternative Layout probiert:



    sowie für: offcanvas-metismenu



    In diesen Dateien natürlich die Codes reingeben.


    In einer erstellten user.css auch den Code von Github Anhang.


    Im Modul das gewünschte Layout aussuchen:




    soweit denke ich richtig. Allerdings sehe ich den Hamburger auf der Desktop Seite nicht :)

    Und Ja, die Codes sind alle drinnen. (4.1.5-rc2-dev)


    Liebe Grüße

    Christine

  • Ich habe nachgeschaut und weiß jetzt wo die Verwirrung beim Offcanvas Layout her ruhrt: Damit das Hamburger Symbol IMMER angeziegt wird, muss man die Klasse navbar-expand-lg entfernen und ein paar anderen CSS Anpassungen machen. (Ich hatte es falsch in Erinnerung, ich dachte, ich hätte das Offcanvas schon so vergesehen)
    Dasselbe ist es mit dem normalen Menü in Cassiopeia, die Klasse navbar-expand-md entfernen macht das Hamburger Symbol dauerhaft sichtbar. Der Rest ist wieder CSS Anpassung.

    z.B.

    CSS
    .container-header .mod-menu {
      flex-direction: column !important;
    }