un menu horizontal

Version imprimable

un menu horizontal

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:

1 2 3 4 5 6 <ul class="menu"> <li> </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:

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 ?

09/08/2022, 20h26
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/

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:

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:

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

10/08/2022, 11h24
chrtophe

Mieux vaut le géer depuis WordPress. Regardes dans les options du menu si tu as la possibilité de mettre un menu vertical.
15/08/2022, 09h37
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...
15/08/2022, 10h04
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

Citation:

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