it-swarm.com.de

Cloudbase 3, Vorlage, Navigationsmenü ausrichten

Ich muss die Navigationsmenüleiste in der Cloudbase 3-Vorlage ausrichten, damit sie sich über die gesamte Artikelbreite erstreckt. Gegenwärtig schwebt das Menü nach rechts und endet irgendwo in der Mitte des Artikels (je nachdem, wie viele Menüpunkte sich dort befinden). Es muss die gleiche Breite wie der Leerraum des Artikels haben.

enter image description here

Ich bin neu in Joomla, daher sind diese Dinge auch neu für mich. Deshalb weiß ich nicht genau, wie ich damit umgehen soll.

2
taro_m

Sie können das Menü mit Flexboxen ausrichten. Dies ist eine CSS3-Eigenschaft, und die Browserunterstützung ist immer noch nicht ausgezeichnet, aber die meisten modernen Browser werden damit gut umgehen.

Fügen Sie Ihrer Site den folgenden CSS-Code hinzu:

.gf-menu {
    display: flex;
    justify-content: space-around;
}
.gf-menu li {
    width: 100%; /* Remove white space between menu items */
}
/* Center text inside each menu item */
.gf-menu .item {
    text-align: center!important;
    padding: 0;
}

Dies sollte Ihnen zunächst einen Anhaltspunkt geben. Möglicherweise müssen Sie das CSS ein wenig anpassen, damit es so aussieht, wie Sie es möchten.

Hoffe das hilft.

(Antwort basiert auf diese Frage von SE)

Wenn Sie center das Menü verwenden möchten, anstatt es zu begründen, versuchen Sie es mit diesem CSS-Code:

ul.gf-menu.l1 {
    text-align: center;
}
.gf-menu li {
    display: inline-block;
    float: initial;
    *display:inline; /*IE7*/
    *zoom:1; /*IE7*/
}
1
johanpw