web-dev-qa-db-fra.com

Cloudbase 3, template, justifier le menu de navigation

Je dois justifier la barre de menu de navigation dans le modèle de Cloudbase , de sorte qu'elle couvre toute la largeur de l'article. Actuellement, le menu flotte vers la droite et se termine quelque part au milieu de l'article (en fonction du nombre d'éléments de menu qu'il contient), il doit avoir la même largeur que l'espace blanc de l'article ci-dessous.

enter image description here

Joomla étant nouvelle pour moi, ces choses sont également nouvelles pour moi. C’est pourquoi je ne sais pas exactement comment y faire face.

joomla-3.xtemplatescssnavigation
2
taro_m

Vous pouvez justifier le menu en utilisant Flexbox . Il s’agit d’une propriété CSS3, et la prise en charge des navigateurs n’est toujours pas excellente, mais la plupart des navigateurs modernes la gèrent bien.

Ajoutez le code CSS suivant sur votre site:

.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;
}

Cela devrait vous donner quelque chose pour commencer, vous pourriez avoir à ajuster un peu le CSS pour qu'il ressemble à ce que vous voulez.

J'espère que cela t'aides.

(Réponse basée sur cette question de SE)

Au cas où vous voudriez centrer le menu au lieu de le justifier, essayez avec ce code CSS:

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