Menüeinstellungen Cassiopeia

dnederveld

Kann man bei Cassiopeia das responsive Verhalten beeinflussen?

je nach Einstellung wechselt das Tempalte von horizonal nach vertikal und dann in das Hamburger Menü "automatisch".

Gibt es die Möglickeit, dass der Umbruch von horizontal in vertikal ab einer bestimmten Seitenbreite nicht komplett erfolgt, sondern ein Umbruch der Menüpunkte in die nächste(n) Zeile(n) vor dem Menüpunkt, der nicht mehr in die Zeile passt?

chr-hl

Moin,
ich bin mir nicht sicher, was Du genau meinst.
Kannst Du zumindest Screenshot posten?

Christian

dnederveld

Leider nicht, ist eine Interne Seite, aber hier ein Beispiel

Breiter Bildschirm

Menüpunkt 1 Menüpunkt 2 Menüpunkt 3 Menüpunkt 4 Menüpunkt 5

Mache ich zum Testen auf dem Desktop das Browserfensterkontinuierlich schmaler wird ab einer bestimmten Breite plötzlich das daraus:

Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5

Gewollt ist aber zum Beispiel:

Menüpunkt 1 Menüpunkt 2 Menüpunkt 3
Menüpunkt 4 Menüpunkt 5

chr-hl

Leider kann ich mit meinen Cassiopeia-Seiten das Problem nicht reproduzieren.
Bei wird dann sofort in den "Hamburger" gewechselt.
Ich möchte jedoch nicht ausschließen, dass ich da nachgeholfen habe.
Gib uns bitte doch den Link zum Problem.

Christian

Edit: Erst jetzt gesehen, dass interne Seite.

dnederveld

so ist der Modul Main Menü eingestellt

chr-hl

Meine Einstellungen:

dnederveld

Mit der Einstellung wird direkt ins Hamburgermenü gewechselt, das will ich scho gar nicht

JoomlaWunder

Vielleicht hilft dir folgendes weiter: Menu in Cassiopeia über die gesamte Breite

drmenzelit

Ja, das ist möglich, in Cassiopeia ist folgendes definiert:

Code

@media (width >= 992px) {
  .container-header .mod-menu {
    flex-direction: row;
    flex: 1;
    display: flex;
  }
}

das heißt, das Standard Menü ist vertikal bis einer Displaygröße von 991px, ab 992px wird sie horizontal. Du kannst in deiner user.css Datei dieses Verhalten ändern, z.B.

Code

@media (min-width: 600px) {
  .container-header .mod-menu {
    flex-direction: row;
    flex: 1;
    display: flex;
    gap: .5rem;
  }
  .container-header .mod-menu > li::after {
    content: "";
    opacity: .2;
    background: 0 0;
    height: 2px;
    margin: auto;
    transition: all .2s,background-color .2s;
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
  }
}

Alles anzeigen

Hier ist es in Benutzung: https://cassiopeia.joomla.com/styles/other-style

dnederveld

Man muss nur einfach warten bis drmenzelit sich die Probleme anschaut.

Das hilft dem Opa auf das Fahrrad!

Danke

Sieger66

Mit einem zusätzlichen:

Code

@media (width<992px) {
 .container-header .mod-menu>li+li {
  margin-left:0.55em
 }
}

sieht es meiner Meinung nach noch ein wenig besser aus.