Vous trouverez ci-dessous des solutions ne requérant aucune connaissance en programmation car utilisant faisant appel à des plugins.
Souvent, ce sont des solutions pratiques, mais qui permettent un grand nombre d’options. On se trouve donc souvent avec des solutions complexes pour un élément qui aurait pu être mis en place plus légèrement.
Proposition 1
Le plugin « Responsive Menu »
Dans les options du plugins:
- Masquer les options PRO (ces options sont payantes) en bas de page
- Définissez la largeur à laquelle le menu se transforme
- Sélectionner le menu à utiliser (qu’il faut créer avant bien entendu!)
- Mentionner l’ID du menu à remplacer.
Vous retrouvez cette information en inspectant le code de votre menu actuel
Toutes les autres options sont à découvrir dans le menu du plugin.
La largeur du menu, le bouton, les couleurs,…
Il est possible qu’une option dont vous avez besoin ne soit pas disponible; ou que c’est une option payante ;-).
Pas de soucis, vous pouvez « over-stylé » dans votre propre css:
css actuel:
Dans votre custom css:
Attention: n’oublier pas d’ajouter le « !important » avant le « ; » de chacune de vos propriétés; le plugin insérant ss réglages inline directement dans le code
body #responsive-menu-container {
transition: transform 0.3s !important;
text-align: right !important;
}Proposition 2
Le plugin “WP Responsive Menu”
Dans les options du plugins: vous retrouverez sensiblement les mêmes options que dans le plugin précédent.
Et vous pourrez aussi over-stylé avec votre propre css.
Je vois 1 raison majeure d’utiliser cette solution plutôt que l’autre plugin: celui-ci ne rajoute pas 800 lignes de css dans le header … mais il doit de toute manière les stocker autre part…
Proposition 3
Le plugin “WP Mobile Menu”
Dans les options du plugins: vous retrouverez sensiblement les mêmes options que dans le plugin précédent.
Et vous pourrez aussi over-stylé avec votre propre css.
Option intéressante, il permet déjà dans la version gratuite de créer 2 menus: 1 à gauche et 1 à droite.