menüs ins topbar von cassiopeia rechtbündig

kraadde

ich habe Menüs für die Anmeldung und Profil bearbeiten erstellt die ich gerne ins topbar rechts platzieren möchte.

Ich habe die Menüs wohl erfolgreich erstellt und auf die Seite gebracht, aber sie verbleiben wie verhext linksbündig. Selbst mit Anpassung in der User.css wie:

#topbar .mod-menu {
justify-content: flex-end;
}

kriege ich es nicht hin.

gibt mir bitte jemand ein Tipp?

Elwood

Hallo!

Die Seite ist im Wartungsmodus.

Vielleicht könnte man sie mal online schalten.

kraadde

Zuviele Fehler und darum in Wartungsmodus.

Das Problem habe ich aber immer noch...

drmenzelit

Nutzt du Cassioepia als Template? Ein Element mit der ID #topbar gibt es nicht. Die Position topbar hat die Klasse .container-topbar

kraadde

Ja ich verwende original Cassiopeia

Stef

Versuche mal folgenden Code in deiner user.css

Code

.container-topbar .mod-menu {
  justify-content: flex-end;
}

kraadde

Danke Stef! Du warst die Rettung!

kraadde

ich habe die von Steff vorgeschlagenen code in die user.css von Cassiopeia eingetragen und es hat funktioniert. Danke Stef. Nun möchte ich die Schriftfarbe ändern und habe es versucht mit:

CSS

.container-topbar .mod-menu {
 justify-content: flex-end;
 color: #FF0000 !important;
}

Die Farbe bleibt aber unverändert. Was mache ich falsch

Stef

kraadde, dein Code funktioniert, auch ohne !important.

Browser-Cache und Joomla Cache wurden gelöscht?

kraadde

ja aber nun sind die menüs linksbündig

Stef

Zitat von kraadde

ja aber nun sind die menüs linksbündig

Dann hast du einen Fehler in deinem Code gemacht.

Hier der ganze Code:

Code

.container-topbar .mod-menu {
 justify-content: flex-end;
 color: #FF0000;
}

Dann wieder Browser Cache und Joomla Cache löschen.

kraadde

und hier:

ich sehe kein fehler. und cache gelöscht..

firstlady

Ein Fehler kann irgendwo weit oberhalb dieses code schnippsels sein. Vielleicht fehlt ein { oder ist zu viel.

Stef

kraadde , solltest du deinen Fehler nicht finden, dann poste hier die ganze user.css

kraadde

gerne. lerne immer noch. und danke für die unterstützung.

Spoiler anzeigen

/* Banner Image */
.mybanner {
min-width: 100%;
}
/* Menu */
/* Override the lila background with white */
.container-header {
background-color: white;
background-image: none;
}
/* Text should now be blue */
.container-header .mod-menu {
color: #0088cc;
}
/* We add padding and radius so that on hover there is a nice background */
.container-header .mod-menu a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
padding: 3px 5px;
color: #0088cc;
}

/* On hover there should be a gray background*/
.container-header .mod-menu a:hover {
background-color: #eee;
}
/* We need to change the color of the Hamburger Menu because white on white is not good */
.container-header .navbar-toggler {
color: #0088cc;
border: 1px solid #0088cc;
}

.footer {
background-color: white;
background-image: none;
color: #0088cc;
justify-content: center !important;
}

.mod-menu mod-list nav{
text-align: right !important;
d-flex justify-content-end;
}
.brand-logo{
width: 417.9;
height:73.5
}

.ms_row {
height: 4em; /* Zwei Zeilen hoch */
vertical-align: middle; /* Text vertikal zentrieren */
border-top: 1px solid red; /* Oberer Rand */
border-bottom: 1px solid red; /* Unterer Rand */
}
.tg-6wtj {
padding: 10px; /* Innenabstand von 10 Pixeln */
}

.custom-row0, .custom-row1 {
height: 4em; /* Zwei Zeilen hoch */
vertical-align: middle; /* Text vertikal zentrieren */
border-top: 1px solid red !important; /* Oberer Rand */
border-bottom: 1px solid red !important; /* Unterer Rand */
}
.custom-cell {
padding: 10px; /* Innenabstand von 10 Pixeln */
}

.custom-table{
width: auto;
margin: auto;
border-collapse: collapse;
}

.table.no-border tr {
border-bottom: none !important;
border-bottom-width: 0px !important;
}

.table.no-border {
border: none !important;
border-collapse: collapse !important;
border-bottom-width: 0px !important;

}

.table.no-border tr,
.table.no-border td {
border: none !important;
box-shadow: none !important;
border-bottom-width: 0px !important;
}

.table.no-border tbody,
.table.no-border thead {
border-top: none !important;
border-bottom: none !important;
}

.mod-menu #item-155 a {
color: red !important;
}

/* Menu toolbar code */

.container-topbar {
justify-content: flex-end;
}
.container-topbar .mod-menu {
color: #FF0000;
}

Stef

Sorry, aber du hast meinen Code mit dem Code vom Beitrag #14 ausgetauscht.

Ich habe nur meinen Code getestet.

Code

.container-topbar .mod-menu {
 justify-content: flex-end;
 color: #FF0000;
}

Es ging um Beitrag #13

Zitat

ich sehe kein fehler. und cache gelöscht..

Wir wissen gar nicht mehr, was wir testen sollen...

Am besten abwarten, bis die Seite online ist.

drmenzelit

Ich muss mich korrigieren, der Code von Stef funktioniert

Typography - Cassiopeia Demo

kraadde

Jetzt hats doch geklappt. Danke Euch beiden

Tags