📌 Créer une barre de menu fixe avec myStickymenu sur WordPress

Tu veux que ton menu de navigation suive l’utilisateur quand il scroll ?
Tu veux améliorer l’expérience sur mobile ou sur des pages longues ?
➡️ myStickymenu est le plugin parfait pour ajouter un menu sticky sans coder une ligne de CSS ou de JS.

Dans ce tutoriel, on va voir :

Pourquoi utiliser un menu sticky ?
Comment installer et configurer le plugin myStickymenu
Les options recommandées pour un rendu propre
Astuces pour l’optimiser sur mobile

🎯 Pourquoi un menu sticky ?

Le menu sticky (ou collant) est une barre de navigation toujours visible en haut de l’écran, même quand l’utilisateur scrolle.

✅ Avantages :

Améliore l’ergonomie
Augmente les clics sur les liens importants
Facilite la navigation sur mobile/tablette
Renforce la conversion (call-to-action toujours visible)

💡 En UX/UI, c’est une bonne pratique sur les pages longues, les blogs, ou les landing pages.

🔧 Installation de myStickymenu

Depuis ton admin WordPress :

Extensions > Ajouter > Rechercher : "myStickymenu"

Ou via WP-CLI :

wp plugin install mystickymenu --activate

Plugin officiel : https://fr.wordpress.org/plugins/mystickymenu/

⚙️ Configuration initiale

Une fois installé, tu trouveras le menu :

Réglages > myStickymenu

Étape 1 : Sélection de l’élément à rendre sticky

Par défaut, le plugin cible :

#masthead

Mais tu peux le remplacer par n’importe quel sélecteur CSS, comme :

.header, .navbar, #main-menu

🔍 Utilise l’inspecteur de ton navigateur (clic droit > « Inspecter ») pour trouver le bon ID ou classe de ton menu.

Étape 2 : Options essentielles

✅ Sticky Class
👉 Classe ou ID de l’élément à fixer

✅ Enable on homepage only ?
👉 Active uniquement sur la page d’accueil ? (laisse décoché si tu veux partout)

✅ Fade or Slide effect ?
👉 Active un effet d’apparition doux (fade/slide)

✅ Hide when scrolling down ?
👉 Masquer le menu quand on scrolle vers le bas, et le réafficher quand on remonte. Très pratique sur mobile.

✅ Responsive Width Limit
👉 Tu peux limiter le sticky à certains écrans (ex : 1024px pour le désactiver sur bureau)

🎨 Personnalisation visuelle

Tu peux modifier :

✅ La couleur de fond
✅ L’opacité (utile pour qu’il soit transparent en haut, mais visible ensuite)
✅ Le z-index si ton menu passe derrière d’autres éléments
✅ Ajouter une hauteur personnalisée (padding/margin)

Exemple CSS à ajouter :

#masthead.stuck {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

📱 Astuces responsive mobile

Si ton thème affiche un burger menu ou une barre réduite sur mobile :

Vérifie que le menu reste visible en scroll
Désactive l’effet sticky sur les écrans < 768px si besoin
Active l’option « Hide on scroll down » pour ne pas gêner la lecture

@media (max-width: 768px) {
  #masthead.stuck {
    padding: 10px 20px;
  }
}

⚡ Compatibilité

Fonctionnalité	Compatible avec myStickymenu
Thèmes modernes (Astra, Blocksy, etc.)	✅
Menus personnalisés	✅ (via ID ou classe)
Elementor / Gutenberg	✅
WooCommerce / panier flottant	✅ (si bien configuré)

🧠 SEO & performance

✔️ Aucun impact négatif sur le SEO (contenu inchangé)
✔️ Chargement léger (plugin très optimisé)
⚠️ Ne pas utiliser trop d’effets de transition inutiles
⚠️ Vérifie que le sticky menu ne cache pas le contenu important sur mobile

📝 Résumé & recommandations

Avantages	Inconvénients
Configuration rapide	Version gratuite limitée
Compatible responsive	Design basique par défaut
Léger, sans dépendance JS	Peut nécessiter du CSS personnalisé
UX mobile améliorée

🔚 Conclusion

Tu veux un menu fixe sur ton site WordPress ?
Avec myStickymenu, tu peux l’ajouter en quelques clics, sans toucher au code.

C’est un petit plugin, mais avec un gros impact UX. Idéal pour garder tes liens importants, call-to-action ou paniers visibles tout le temps.