Menüzeile zentrieren, Cassiopeia

derkps · 7. November 2021

Hallo,

ich kann in user.css über diesen beiden Klassen das Layout der Menüleiste ändern (Schrift, Farbe, Rahmen, hover etc.)

Code

/*komplette navbar*/
.container-header .container-nav {...

/*bestückte navbar*/
.container-header .mod-menu {...

Die Leiste beginnt aber immer links. Ich möchte sie zentrieren. Mit padding, margin, justify-content komme ich nicht weiter.

Hat jemand eine Idee?

vG

deltapapa · 7. November 2021

Hi,

mit

Code

.container-header .navbar-brand {
    margin: auto;
    font-size: 3rem;
}

habe ich das Branding in der Schrift vergrößert und mit margin: auto zentriert. Meinst du das?

derkps · 7. November 2021

Nee, nicht ganz.

Ich meine dieses rosa mainmenü auf der Position Menü.

Mit diesem Code kann ich das rosa Ding um z.B. 100px verschieben; also habe ich schon mal die richtige Klasse erwischt.

Code

/*bestückte navbar*/
.container-header .mod-menu {
color: #0088cc;
background-color: #faa; /*#999;*/
font-weight: bold;
margin-left: 100px;
/*margin: 0 auto 0 auto;*/
/*margin: auto;*/
/*margin-left: auto;*/
/*margin-right: auto;*/
}

Alles anzeigen

Aber alles mit 'auto' hat keinerlei Wirkung.
Bei der Zentrierung eines eingefügten Bildes im Beitrag/Modul funktioniert es mit 'auto'

Code

margin-left: auto; margin-right: auto;

Das ist wieder seltsam

vG

Indigo66 · 8. November 2021

Ich habe das Standradtemplate nicht aktiv, daher wäre ein Link zur Seite ganz hilfreich.

Aber wenn mich nicht alles täuscht wird CSS-flex verwendet. Da funktionieren die althergebrachten Zentrierungen nicht mehr.

Schau Dir mal https://maurice-web.de/flexbox…stify-contentalign-items/ an.

derkps · 8. November 2021

ja, ist flex!

Im Link habe ich die rosa-Box weiß auf weiß dargestellt: ycsh80.de

Stef · 8. November 2021

Folgender Code in der user.css einfügen:

CSS

.grid-child.container-nav {
    justify-content: center !important;
}

derkps · 8. November 2021

Also wie gesagt: im Template ist alles auf 'flex' gestellt und gem. Link #4 (Vielen Dank!) ist 'justify-content' die richtige Wahl.

Obwohl ich in '.container-header .mod-menu' mit 'margin-left: 100px;' etwas bewirke, muss 'justify-content' aber in '.container-header .container-nav' eingesetzt werden!

Dann sitzt das Menü in der Mitte oder rechts.

Code

/*komplette navbar*/
.container-header .container-nav {
    background-color: #fff;
    justify-content: center; /*right;*/
}

Muss ich nicht verstehen, ist aber so!

Vielleicht, weil die 'bestückte navbar' als content von der 'kompletten navbar' anzusehen ist. Das sieht man beim rosa-färben.

vG

derkps · 8. November 2021

Danke Stef,

dein Upload war wohl schneller als meins.

Für mich persönlich ist diese Erkenntnis aber wichtig

Zitat

..weil die 'bestückte navbar' als content von der 'kompletten navbar' anzusehen ist.

Damit man auch versteht, was man da zusammen klickt.

vG

Tags