Cassiopeia - Menüpunkte nebeneinander anordnen

drmenzelit · 1. März 2023

Black and white - Cassiopeia Demo

Für dich getestet:

Menü oben (below-top) mit Layout "Dropdown" -> wird nicht zum Hamburger. Mit CSS (user.css) horizontal ausgerichtet.

Menü unten (menu) mit Layout "Collapsible Dropdown" -> wird zum Hamburger

Elwood · 1. März 2023

Zitat von chris73

Den Link kann ich leider nicht senden, da lokal.

Vielleicht ist es besser für die Supporter,

wenn du die Seite auf einer Subdomain veröffentlichst.

chris73 · 1. März 2023

Hi Viviana,

ja, genau so soll es ausschauen, aber bei mir klappt es einfach nicht.

Ich habe jetzt folgendes gemacht:

- in die user.css habe ich das Script von Dir eingetragen:

Code

.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

- Das Menü oben (below-top) hat unter Erweitert: Layout --> Dropdown und Modul-Tag --> nav drin, sonst nichts weiteres

- Das Menü unten (menu) hat unter Erweitert: Layout --> Collapsible Dropdown und bei Modul-Tag --> nav drin, sonst auch nichts

Muss ich irgendwo noch weiteres eintragen (z.B. horizontal, etc.)?

Muss doch jetzt mal klappen, oder?

Chris

christine2 · 1. März 2023

Zitat von chris73

Muss ich irgendwo noch weiteres eintragen (z.B. horizontal, etc.)?

Nein, das musst Du nicht. Das wäre z.B. nötig beim footer (bottom menu), dass die Menüs am Desktop horizontal sind.

(Menu Class: menu-horizontal)

Es klappt eigentlich auch, so wie in #21 beschrieben.

Überprüfe die user.css, ob irgendwo oberhalb vom neuen Eintrag ev. ein Syntaxfehler ist.

Z.B. fehlende Klammer etc.

Und: Änderung in der user.css kann ein bisschen dauern. Cache leeren.

Liebe Grüße

Christine

chris73 · 1. März 2023

...warum geht das bei mir nicht? Habe alles gemacht (Cache, Browser, etc.)

Elwood · 1. März 2023

Zitat von chris73

...warum geht das bei mir nicht? Habe alles gemacht (Cache, Browser, etc.)

Zitat von Elwood

Vielleicht ist es besser für die Supporter,
wenn du die Seite auf einer Subdomain veröffentlichst.

chris73 · 9. März 2023

Hi,

können wir noch einen Versuch machen. Ich verstehe einfach nicht, warum es bei mir nicht funktioniert. Jetzt kopiere ich einmal meine komplette user.css für Euch rein. Vielleicht gibt es hier einen Zusammenhang, der das Nebeneinanderstellen verhindert?

Danke Euch.

Chris

CSS

/******CUSTOM *********/
.container-nav > li {
  position: relative;
}

.container-nav li:hover > ul {
  background-color: #fff;
  border: 1px solid #dfe3e7;  
  border-radius: 5px;
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 16px;
}

.container-nav li:hover > ul li {
  display: block !important;
}

.grid-child.container-top-a {
    flex-direction: column;
} // richtet top-a untereinander und nicht nebeneinander aus

.widgetfooter ul { 
  list-style: none 
} // Zeigt Listen ohne Punkt an

.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
} // Topmenü Items bei Mobile nebeneinander ausrichten

Alles anzeigen

christine2 · 9. März 2023

Gib mal Deine Kommentar // xyz Anweisungen raus.

Kommentar am Anfang des Blocks (Beispiel):

/* Topmenü Items bei Mobile nebeneinander ausrichten */

danach Deinen Code.

Liebe Grüße

Christine

chris73 · 10. März 2023

Vielen, vielen Dank Christine - das war die Lösung!

Das Thema ist damit gelöst - so einfach und doch so schwierig.

Chris

Tags