Joomla 4.X: Menüzeile zentrieren?

Girgei · 16. Oktober 2021

Hi,

wie erstellt man unter Joomla 4.x eine zentrierte Menüzeile, und zwar so, dass ein Zeilenumbruch z.B. bei größeren Buchstaben, auch die 2. Zeile im Frontend Bildschirm zentriert ist??

Der Code von Joomla 3.X in der user.css scheint nicht mit Joomla 4.X zu funktionieren.

Code

.nav-pills > li {
 display: inline-block;
 float: none;
}
.nav {
 text-align: center;
}
.header .custom h3 {
    line-height: initial;
}.container-fluid {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

Alles anzeigen

Danke für Tipps

Ciao

Girgei

Lui_brempt · 17. Oktober 2021

Joomla 4 nutzt bootstrap 5. Daher funktioniert navpills etc. wahrscheinlich nicht mehr. Du musst schauen welche Selektoren, Klassen etc. jetzt anzusprechen sind. Webdeveloper-Tools der Browser sollten dir weiter helfen können die passende Einstellung zu finden.

Girgei · 17. Oktober 2021

Zitat von Lui_brempt

bootstrap 5. Daher funktioniert navpills etc. wahrscheinlich nicht mehr.

So etwas habe ich befürchtet

Elwood · 17. Oktober 2021

Vielleicht interessant:

Thema

Tutorials und Links zur Verwendung des Cassiopeia Templates in Joomla!4

Einige Links zu Tutorials und zu Infos zum Cassiopeia Template von Joomla! 4

https://blog.astrid-guenther.d…tes-fuer-joomla-4-themen/

https://magazine.joomla.org/al…and-horizontal-navigation

https://help.joomla.org/proxy?…plates:_Templates&lang=de

https://cassiopeia.joomla.com/help

Sieger66

15. Oktober 2021

Girgei · 17. Oktober 2021

Zitat von Elwood

Vielleicht interessant:

Ja, danke.

Die meisten kannte ich schon, da ich seit mehreren Tagen im Internet wegen der zentrierten Menüzeile recherchiert habe. Allerdings ohne damit Erfolg zu haben.

Ich kann und mag es aber eigentlich nicht glauben, dass man sich wegen so einer Kleinigkeit mit den neuesten und tiefsten Tiefen der Programmiertechniken (bootstrap.X) befassen muss. Damit wäre ich wohl überfordert, da ich kein Informatikstudium absolviert habe.

Vielleicht geht's doch irgendwie mit der user.css oder ähnlich

Ciao

Girgei

Indigo66 · 17. Oktober 2021

Zitat von Girgei

Vielleicht geht's doch irgendwie mit der user.css oder ähnlich

Dann gib uns mal einen Link zu Deine Seite.

Girgei · 17. Oktober 2021

Zitat von Indigo66

Dann gib uns mal einen Link zu Deine Seite.

Die Joomla 4 Version ruht noch auf localhost, soll aber weitgehend so werden wie die Jommla 3:

http://www.wesslinger-blasmusik.de

Indigo66 · 18. Oktober 2021

Das bringt uns nichts, wir müssen das schon am Cassiopeia Template sehen um es analysieren zu können.

Girgei · 18. Oktober 2021

Zitat von Indigo66

Das bringt uns nichts, wir müssen das schon am Cassiopeia Template sehen um es analysieren zu können.

Ist klar. Jetzt ist es bei Alfahosting: https://wbm.wesslinger-blasmusik.de

astrid · 18. Oktober 2021

Versuche es einmal mit

Code

.container-header .mod-menu {
justify-content: center;
}

in der custom.css.

Edit: Stef hat recht. Ich meinte die user.css, wenn Cassiopeia das Template ist ...

Stef · 18. Oktober 2021

Zitat von astrid

Versuche es einmal mit

in der custom.css.

oder in der user.css

Girgei · 19. Oktober 2021

Zitat von astrid

Versuche es einmal mit

Ja, es funktioniert!

So einfach kann's gehen, wenn man weiß wie.

Vielen Dank Astrid

Gäbe es auch noch 'ne Möglichkeit, die Abstände zwischen den Menüeinträgen zu reduzieren??

Ciao

Girgei

astrid · 19. Oktober 2021

Versuche einmal das:

Code

body.wrapper-fluid footer>.grid-child, body.wrapper-fluid header>.grid-child.container-below-top {
line-height: 0.8;
}

Wobei der Wert 0.8 nur als Beispiel gedacht ist. Vielleicht reicht dir auch 0.9? Dies wirkt sich so auf alles im Container below-top aus. Aber da ist bei dir ja auch nur das Menü eingefügt, deshalb würde ich das so machen.

Girgei · 19. Oktober 2021

Zitat von astrid

Versuche einmal das:

Hallo Astrid,

vielen Dank für den Code. Er reduziert die Zeilenabstände, was ja auch nicht schlecht ist. Ich habe ihn auf 0,5 eingestellt.

Aber die Abstände zwischen den Menüeinträgen sind halt immer noch unverändert ziemlich groß. Vielleicht hast Du ja dafür auch noch einen Code um sie zu reduzieren??

Vielen Dank für Deine Bemühungen.

Ciao

Girgei

Indigo66 · 19. Oktober 2021

Zitat von Girgei

Aber die Abstände zwischen den Menüeinträgen sind halt immer noch unverändert ziemlich groß.

CSS

.container-header .mod-menu.nav > li {
    margin: 0;
}

Girgei · 19. Oktober 2021

Hallo und vielen Dank Indigo66 für den Code. Auch er funktioniert super.

Das wars erst mal. Ich hoffe die nächsten Tage ohne externe Unterstützung weiter machen zu können. Aber

- Heute ist nicht alle Tage - Ich komm' wieder keine .....

Ciao

Girgei

Logo24 · 26. Dezember 2023

Hallo, ich bin dabei, meine Joomla-Homepage von Version 3 auf 4 upzudaten mit dem Cassiopeia Template, dabei hat mir der Blog auf astrid-guenter.de geholfen. Ich habe die User.css erfolgreich nach Anleitung erstellt, aber leider läßt sich das Bannerbild und und Menü nicht zentrieren. Ich hab den obigen Code von #10 in meine User.css eingefügt, um zumindest das Menü zu zentrieren..leider erfolglos. Wo genau muß der Code eingefügt werden?

Danke für die Unterstützung..

Hans

JoomlaWunder · 26. Dezember 2023

Zitat von Logo24

Ich hab den obigen Code von #10 in meine User.css eingefügt, um zumindest das Menü zu zentrieren..leider erfolglos. Wo genau muß der Code eingefügt werden?

Danke für die Unterstützung..
Hans

Ein neues Thema wärer besser gewesen. Dieses ist über 2 Jahre alt und steht auf gelöst. Wird sicher ein Mod noch verschieben.

Wird deine user.css denn überhaupt geladen? Der Ort, wo diese liegen sollte, hat sich ja mal geändert (media-Verzeichnis).

Und hast du einen Link zur Problemseite? Dann kann man sich das selber mal anschauen und probieren.

Logo24 · 26. Dezember 2023

Danke für die flotte Antwort..die aktuelle Seite ist z.Zt. noch nur lokal online..
Ich nutze die letzte Version von Jommla 4.4.1 Die user.css wird geladen und bewirkt auch andere gewünschte Anpassungen wie Farbänderung des Banners, aber die Grafik und das Menü kleben an der linken Seite, auch nach Einfügung des Codes von Astrid

Ich hab mich hier drangehängt, weil das Thema Zentrierung auch hier gepostet wurde.

Viele Grüße

Hans

Elwood · 26. Dezember 2023

Stelle sie online.

Z.b. auf eine Subdomain.

Somit können wir es genau analysieren.