Discussion :

[laurentSc]

Bonjour,

je souhaite mettre dans mon pied de page un menu horizontal. J'ai donc mis dans mon widget pied de page 1 un html personnalisé :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul class="menu">
	<li>&nbsp;</li>
	<li><a class="actif" href="/?page_id=123">nous contacter</a></li>
	<li><a href="/?page_id=150">vos témoignages</a></li>
        <li><a href="/?page_id=173">Mentions légales</a>	</li>
</ul>

et dans le CSS additionnel

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.menu {
    display: flex;                /* Transformation en flexbox */
  }

(en fait, c'est plus compliqué que ça mais j'ai enlevé les autres règles pour me centrer sur ce problème).
Si je teste ce code en dehors de Wordpress, il produit bien un menu horizontal, mais nada si je le met dans wordpress (le menu est alors vertical).

Mon thème est simplement Twenty-Twenty. Si je désactive tous les plugins, c'est pareil. Savez-vous d'où ça pourrait venir ?

[licardentaistor]

hello,

tu peux t'aider du devTools de Chrome (F12) pour voir ce qui ne va pas sur ton CSS.

https://developer.chrome.com/docs/devtools/css/

[laurentSc]

Merci, cela ressemble aux outils de développement de Firefox (que je connais mieux). Cela dit, même avec l'outil de Firefox, je ne m'en sortais pas et je m'en suis sorti en utilisant un autre code de menu horizontal...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="menu">
    <a href="/?page_id=123" class="btn">nous contacter</a>
    <a href="/?page_id=150" class="btn">vos témoignages</a>
    <a href="/?page_id=173" class="btn">Mentions légales</a>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.menu{
  background:#1b1b2b;
  padding:10px;
  text-align:center;
  font-family: 'Oswald', sans-serif;
}
 
.btn{
  color:#999;
  background:white;
  padding:10px 20px;
  font-size:15px;
  text-decoration:none;
  letter-spacing:2px;
}
 
.btn:hover{
  border:none;
  background:lightblue;
  padding:20px 20px;
  color:#1b1b1b;
  text-decoration:underline;
}

[Christophe]

Mieux vaut le géer depuis WordPress. Regardes dans les options du menu si tu as la possibilité de mettre un menu vertical.

[Olivier C]

Bonjour. Si la solution flex ne marche pas c'est qu'il doit y avoir un conflit avec le thème. Essayer de changer le nom de la classe déjà, en effet, ".menu" dans un thème préexistant... il y a de grandes chances que le terme soit déjà pris (mais ça vous le saurez vraiment avec l'inspecteur F12 du browser). Vous pourriez aussi augmenter le poids du sélecteur, et même mettre un !important pour tester...

[laurentSc]

Merci pour vos réponses chrtophe et Olivier C, mais comme j'ai actuellement un truc qui marche, je vais appliquer la devise qu'on voit un peu partout

être fainéant est une qualité importante pour un programmeur