Cassiopeia - Menüpunkte nebeneinander anordnen

    Hallo,


    ich benutze das Cassiopeia Template und habe unter below-top ein Topmenü eingerichtet.

    In der Desktop-Version sieht auch alles toll aus, aber wenn ich die Mobile-Version aufrufe (Smartphone-Breite), dann werden die Menüpunkte plötzlich untereinander, also vertikal, angeordent und nehmen sehr viel Platz weg. Damit sieht man den eigentlichen Content erst nach ein wenig scrollen - was schlecht ist.

    Was muss man machen, um auch in der Mobile-Version die einzelnen Menüpunkte nebeneinander anzuordnen, um möglichst platzsparend zu sein?

    Wahrscheinlich ganz einfach. Ich habe aber leider noch keine Lösung gefunden.


    Schon vorab vielen Dank für Euren Support.


    Chris

    Hallo Christian,


    vielen Dank für die Rückinfo. Leider kein Link verfügbar, da die Seite noch lokal ist. Das Problem ist m.E. aber ein Cassiopeia Standardthema und müsste so für jeden gut nachvollziehbar sein.

    Eine vertikale Ausrichtung der Memüpunkte ist auch nicht zu empfehlen, da damit bereits die Hälfte des Screens voll ist.

    Vielleicht muss man was mit dem Child CSS machen, um eine horzizontale Ausrichtung beizubehalten. Zumindest hat das früher bei Protostar in Joomla 3 funktioniert.

    Wäre echt klasse wenn hier jemand eine Lösung hätte.


    Vielen Dank.


    Chris

    Du könntest mit 2 Menüs arbeiten und je nach Displaygröße festlegen, welches angezeigt werden soll.

    Wie du die Menüs dann auf verschiedene Displaygrößen wahlweise zuordnen kannst, habe ich aber noch nicht ausprobiert.

    Hallo,


    nochmal Danke. Ich versteht was Du bzgl. responsive Darstellung sagen möchtest. Aber die Abdeckung mit Menüpunkten über die halbe Seite, dann das Logo noch darunter und daneben das eigentliche Hamburger Menü ist ja auch nicht toll für den Nutzer.

    Gerade im Smartphone sollte ja gleich Content sichtbar sein.


    Könnte mir jemand sagen wie man das mit dem Topmenü unter below-top hinbekommt? Ich habe schon einiges in der user.css mit media und breakpoints versucht, aber es hat einfach nicht geklappt.


    Danke....


    Chris

    Zitat von chris73

    In der Desktop-Version sieht auch alles toll aus, aber wenn ich die Mobile-Version aufrufe (Smartphone-Breite), dann werden die Menüpunkte plötzlich untereinander, also vertikal, angeordent und nehmen sehr viel Platz weg. Damit sieht man den eigentlichen Content erst nach ein wenig scrollen - was schlecht ist.

    Menüpunkte nebeneinander auf einem Smartphone ist auch für mich ein absolutes No-Go.

    Wenn man das Hamburger Menü anklickt, dann möchte man sicherlich auch die Menüpunkte schön ordentlich und in einer "schönen" Größe gut lesbar angezeigt bekommen. Das wäre horizontal nicht möglich (vielleicht mit einer guten Lupe). Der Inhalt interessiert in dem Moment dann überhaupt nicht.

    Sonst fertige mal eine Skizze oder Ähnliches an, wie du es dir vorstellst!


    Erst wenn man einen der Menüpunkte anklickt, sollte der Inhalt "schnell" sichtbar werden.

    Ich vermute, du hast die Einstellung für das Menü suboptimal gewählt. Das könnte man sofort mit einem Link zur Webseite beurteilen können. Dazu die Seite auf den Webserver umziehen und gleich unter realen Serverbedingungen testen! (vor Such-Bots schützen, eventuell Passwortschutz über Server einrichten).


    Nebenbei: Was du in der mobilen Version alles angezeigt haben möchtest und was nicht, das kannst du doch selbst bestimmen.

    Vorweg: Gebe da meinen Vorrednern Recht.


    Nur so, ev. als 50 %iger Kompromiss (ob richtig, ideal sei dahingestellt) :)

    CSS
    .metismenu-item {
display: inline-flex !important;  
}

    Ging leider nur mit einem !important



    Liebe Grüße

    Christine

    Hallo Christine,


    das sieht doch schon einmal sehr gut aus. Dieses Setup sieht gut und kompakter aus.

    Noch ein paar Fragen hierzu:

    - metismenu ist für below-top, richtig?

    - auf welcher Position hast Du das Logo angesiedelt und auf welcher Position die Search-Box?

    - bekommt man das Hamburger Menü auch noch rechts neben das Logo, oder rechts neben die Search-Box, so dass beim Öffnen nicht das below-top Menü überlagert wird?


    Das geht absolut in die richtige Richtung!


    Vielen Dank.


    Chris

    Hi Viviana,


    vielen Dank. Das ganze Problem bei den Standardpositionen von Cassiopeia ist aber der große Platzverbrauch in der mobilen Smartphone Anzeige.

    Deshalb habe ich wie folgt umstrukturiert:

    Logo auf die Position: menu

    Suche auf die Position: menu

    Hauptmenü auf die Position: menu

    auch in dieser Reihenfolge.

    Topmenü auf die Position: below-top


    Jetzt ist das Topmenü ganz oben. Dieses verbraucht aber in der mobilen Version viel Platz. Deshalb wäre die Anweisung von Christine eigentlich super.

    Diese funktioniert aber in meiner user.css (noch) nicht?!? Müsste man für below-top dort nicht einen anderen Befehl zur horizontalen Ausrichtung bei der mobilen Anzeige verwenden?


    Wäre echt klasse wenn dies funktionieren würde. Auch gerne mit einem anderen Vorschlag für die Postionierung, aber da habe ich schon viel probiert.


    Danke.


    Chris

    ...funktioniert leider auch nicht :(

    Wenn man wie in Deinem Beitrag #11 die Einstellungen macht, dann wird in der Mobile-Ansicht ein Hamburger Menü daraus, was auch nicht gut ist, da man dann ein Hamburger Menü für das Hauptmenü und das Topmenü hat.


    Ich kann mir gar nicht vorstellen dass dies bei Cassiopeia so unlösbar scheint. Mann muss doch die Items für Topmenü auch wie in Prototar bei der Mobile-Ansicht nebeneinander bringen, selbst die 50% Lösung würde reichen.


    Chris

    Vorweg: drmenzelit Viviana, Deines muss ich erst noch probieren, weil ich mit Herumbasteln tätig war.

    Male es trotzdem hier her - danach muss ich wieder die Testseite zurechtstutzen :)


    Zeige hier nur auf, wie es aussehen täte, mit Deiner gewünschten Position: below-top


    a) das hier wäre: Position alles auf: below-top (Logo, Menüs, Search):



    Na ja, schön ist anders :)


    b) alles auf: below-top, außer Search (das bleibt auf search):



    Zum Logo: System > Template > Stile > Brand: Nein

    Eigenes Modul angelegt & dort das Logo rein.


    Reihenfolge kann man bei den Menüs im Backend herumschieben.


    Liebe Grüße
    Christine


    Edit nun nach #16:

    Mich irritiert: Hauptmenü und Topmenü. Hast Du zwei, oder wie?

    Hi Christine,


    ja, ich habe zwei Menüs. Ein Hauptmenü (unter der Position: menu) und eine Topmenü (unter der Position: below-top). Um dieses Topmenü geht es auch.

    Hier möchte ich eine horizontale, statt der vertikalen Ausrichtung in der Mobile-Ansicht.

    Das Logo hatte ich bereits so angelegt wir von Dir beschrieben (auch unter der Position: menu).

    Kann es sein, dass Dein Script aufgrund der below-top Position anders aufgebaut sein muss? Muss ggf. noch ein Media-Befehl, zur Differenzierung von Smartphone-Breite und den andere Breiten mit in das Script? Zumindest war das so unter Protostar.


    Vielen Dank.


    Chris

    Zitat von chris73

    Wenn man wie in Deinem Beitrag #11 die Einstellungen macht, dann wird in der Mobile-Ansicht ein Hamburger Menü daraus, was auch nicht gut ist, da man dann ein Hamburger Menü für das Hauptmenü und das Topmenü hat.

    Du kannst das Hamburger Verhalten ändern in dem du ein anderes Layout nimmst.

    Den Link zu meiner Cassiopeia Demoseite hatte ich schon gepostet: https://cassiopeia.joomla.com/help/menu-module


    Ohne einen Link zur Seite ist alles Rätsel raten....

    Hallo,


    bzgl. der Demoseite wollte ich nur sagen, dass alle Einstellungen für die Mobile-Ansicht zu einem Hamburger Menü führen, was ja nicht passt.

    Den Link kann ich leider nicht senden, da lokal.

    Aber eigentlich ist das Thema gar nicht so kompliziert zu erklären.

    Das einzige Problem ist mein Topmenü welches ich in der Position "below-top" angeordnet habe. Hier möchte ich unter der Mobile-Ansicht statt einer vertikalen Ausrichtung der einzelnen Menü-Items, weiterhin eine horizontale Ausrichtung.


    Das wäre eigentlich alles.


    Chris