oberes Menü verschieben, Farbeinstellungen

Setz das Logo auf die Position "menu"

Hier noch was zu diesem Thema:

Thema

[Cassiopeia] Logo und Menü zentrieren und einrahmen

Hallo,

ich möchte für meine Eltern eine neue Website erstellen mit Joomla 4. Bei dem Cassiopeia Template ist es leider nicht mehr so wie damals beim Protostar, dass alles mittig und eingerahmt dargestellt wird. Ich würde gerne das Menü und das Logo mittig platzieren und gerne wieder so ein Rahmen einblenden um die Beiträge. So dass ich links und rechts ein Streifen habe. Kann mir jemand sagen ob das möglich ist? Leider arbeite ich lokal auf Xampp. Ich poste mal ein Screenshoot.

techniker

29. Dezember 2021 um 14:45

Menü neben Logo kannst du damit erreichen:

.container-header {
  display: flex;
}

Farbe im Header:

.container-header {
  background-color: #000;
  background-image: none;
}

Help - Cassiopeia Demo

(404er mal ignoriert).

Probiers so:

Nur für oben:

.container-header .mod-menu  > li > a {
color: blue;  
}

Auch für die Untermenüs:

.container-header .mod-menu, .mm-collapse  > li > a {
 color: blue; 
}

Liebe Grüße

Christine

Zitat von Wichtelmann

Grüße Dich!
Klasse danke. Das scheint soweit zu funktionieren. Jedoch frage ich mich, warum ich eine "eigene" Farabe anlegen soll (hier jetzt weiß), wäre es nicht einfacher/besser den Farbverlauf, der kommt, wenn ich es wieder auskommentieren, zu entfernen? Oder ist das dem Grunde nach egal?

Weiterhin habe jetzt das Problem, dass das Menü (Hamburger Menü im responsiven Design) nicht mehr sichtbar ist

Und kann ich den Hintergrund im Untermenü separat in einer anderen Farbe gestalten?

Du kannst den Farbverlauf auskommentieren, wenn Du möchtest.

Hamburger:

Da der Hintergrund weiß ist, sieht man den nicht, also probier:

.container-header .navbar-toggler {
background: #f00;
}

Hintergrund vom Untermenü:

.mm-collapse > li {
background-color: lightblue;
}

Da sich die Farbvarianten öfters ändern, kann ich es nur vom aktuellem Stand sagen.

Liebe Grüße

Christine

Zitat von Wichtelmann

glaube so passt es, nur fehlt jetzt der Aufklapppfeil für das Untermenü bei "über uns". Ich vermute durch die ?

Code

.mm-collapse  > li > a{
color: #fff;
}

Nein, obiger Code passt schon, weil es weiße Schrift mit rotem Hintergrund für die Untermenüs ist.

Sonst täte die man ja nicht sehen.

Dass man den Aufklapppfeil nicht sieht kommt von daher:

:root {
--cassiopeia-color-primary: #fff; 
etc.

Daher:

.metismenu.mod-menu .mm-toggler {
color: red;
}

bekäme ich temporär:

Liebe Grüße

Christine

Warum hast Du:

:root {
/* --cassiopeia-color-primary: #fff;*/ 

auskommentiert? Davon hatte ich nichts geschrieben.

Gib mal nur den obigen Code wieder aktiv. Welche Pfeile sollen wie sein?

Mach obiges mal retour, dann sehen wir weiter.

Zitat von Wichtelmann

das war nur zum testen, hatte ich direkt wieder Rückgängig gemacht.
Hab Deinen Code drin, der Pfeil ist da, aber im Untermenü ist bei "Einsatzabteilung" noch ein Untermenü...

Muss ich mir in Ruhe anschauen ....

Zitat von Wichtelmann

Nur am Rande: Wo ist dieses "Dreieck" hinterlegt, könnte man das auch mit einem anderen Sysmbol austauschen?

Dazu gibt es einen Thread. Muss ich erst suchen. Eines nach dem anderen

Zitat von Wichtelmann

Hab Deinen Code drin, der Pfeil ist da, aber im Untermenü ist bei "Einsatzabteilung" noch ein Untermenü...

Na dann

button.mm-collapsed.mm-toggler.mm-toggler-link {
color: #fff;  
}

Liebe Grüße

Christine

Zitat von Wichtelmann

Du meinst den hier? Sind keine Icons sondern reiner CSS...

Ja, meinte ich. Habe aber auch nicht gesagt, dass dort die Lösung ist. Mir war da halt was im Hinterkopf. Muss man sich diese Frage extra ansehen.

Zitat von Wichtelmann

leider nicht... Wenn der obere Pfeil aktiv ist, ist er sichtbar. Bei eingeklapptem Menü aber leider nicht
P.S. umgekehrt dann keider auch, bei ausgeklapptem 2. Untermenü ist der Pfeil auch verschwunden

Oben der Hintergrund ist weiß, nimmt er sich u.a. von:

--cassiopeia-color-primary: #fff; usw. halt. Habe einige Varianten probiert.

Da der Hintergrund von den Untermenüs rot ist, sieht man den roten Pfeil nicht.

Macht man den weiß, ist er oben auch weiß.

Bin schon ganz getogglert

Kann daher nur Kompromiss vorschlagen (da Du den Hintergrund von den Untermenüs rot haben möchtest):
(ich schreibe das immer am Schluss von der user.css, um die anderen Codes temporär zu überschreiben).

/*Untermenü Hintergrund*/
.mm-collapse > li {
background: red;  
}

button.mm-collapsed.mm-toggler.mm-toggler-link {
color: darkgrey;  
}
.metismenu.mod-menu .mm-toggler {
color: red;
}

am screenshot habe ich blue statt darkgrey.

Liebe Grüße

Christine