WordPress : CSS ne stylera pas correctement la sortie de wp_nav_menu()

Publié par Jean-Michel le

J’essaie de créer un thème avec un menu horizontal qui est dynamiquement étiré pour remplir l’élément conteneur. J’utilise wp_nav_menu() pour récupérer un menu depuis le backend et le styliser via CSS. Voici un peu de code :

        <?php wp_nav_menu(
            array( 
                'theme_location' => 'headerNavMenu', 
                'menu_class' => 'headerNavMenu',
                'container_id' => 'headerNavMenu'
            )
        ); ?>

        <div class="headerNavMenu">
          <ul>
            <li class="page_item page-item-7"><a href="http://localhost/wordpress/site1/">site1</a></li>
            <li class="page_item page-item-17"><a href="http://localhost/wordpress/site2/">site2</a></li>
            <li class="page_item page-item-14"><a href="http://localhost/wordpress/site3/">site3</a></li>
            <li class="page_item page-item-10"><a href="http://localhost/wordpress/site4/">site4</a></li>
          </ul>
        </div>

Le premier paragraphe est le code original et le second est la sortie de la fonction PHP. La seule différence sont les sauts de ligne que j’ai ajoutés pour la lisibilité. Le CSC :

.headerNavMenu {
   width: 100%;
   border: 1px #a2a2a2 solid;
}

.headerNavMenu ul {
    text-align: justify;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 90%;
    list-style-type: none;
   list-style-image: none;
   margin-left:auto;
   margin-right:auto;

}

.headerNavMenu ul::after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

.headerNavMenu li {
   display: inline;
   line-height: 100%;   
}

Le CSS est appliqué de manière égale sur les deux parties du code, mais seule la seconde s’affiche correctement. La première partie est alignée à gauche, avec tous les liens côte à côte sans aucune marge. La seule différence dans le code que j’ai pu détecter était les sauts de ligne. Comment résoudre ce problème ?

Lire également:  Wordpress : Choisir l'élément de menu "sélectionné" dans le menu mobile pliable de WP

Merci d’avance!

Solution n°1 trouvée

J’ai trouvé une autre façon de faire ceci:

.headerNavMenu {
    width: 100%;
    display: table;
    text-align: center;
    margin: 0;
}

.headerNavMenu ul {
    display: table-row;
}

.headerNavMenu li {
    display: table-cell;
    margin: 0;
}
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *