Le menu de navigation principal d'un site Web contient généralement des liens vers toutes les pages les plus importantes. Lorsque vous rendez ce menu fixe, vous pouvez le maintenir à l'écran pendant que l'utilisateur fait défiler la page. Ainsi, il est toujours à portée de main.
Cela rend la navigation plus accessible, permettant aux utilisateurs de passer rapidement à différentes sections de votre site sans avoir à remonter. Selon nous, l'utilisation d'un menu fixe peut contribuer à accroître l'engagement et à améliorer la convivialité générale du site Web.
Dans cet article, nous vous montrerons comment ajouter facilement un menu de navigation flottant et fixe à votre site Web WordPress.
Qu'est-ce qu'un menu de navigation flottant et fixe ?
Un menu de navigation fixe ou flottant « colle » en haut de l'écran lorsque l'utilisateur fait défiler vers le bas, de sorte qu'il est toujours visible.
Habituellement, le menu de navigation principal dans WordPress contient des liens vers le contenu le plus important de votre site Web. En rendant ce menu fixe, les visiteurs peuvent cliquer sur ces liens à tout moment sans avoir à faire défiler.
Si vous gérez une boutique en ligne, le menu de navigation principal contient généralement des liens vers des pages conçues pour convertir, telles que la page de paiement et le panier client. En rendant le menu principal fixe, vous pouvez souvent réduire les taux d'abandon de panier et augmenter les ventes.
Cela étant dit, voyons comment vous pouvez facilement créer un menu de navigation flottant et fixe dans n'importe quel thème WordPress ou boutique WooCommerce. Utilisez simplement les liens rapides ci-dessous pour accéder à la méthode que vous souhaitez utiliser :
- Méthode 1 : Ajouter un menu fixe via les paramètres de votre thème (Facile)
- Méthode 2 : Ajouter votre menu de navigation fixe à l'aide d'un plugin (Recommandé)
- Méthode 3 : Ajouter un menu de navigation flottant fixe à l'aide de code
- Bonus : Rendre vos articles WordPress fixes
Méthode 1 : Ajouter un menu fixe via les paramètres de votre thème (Facile)
Certains des meilleurs thèmes WordPress prennent en charge nativement les menus de navigation fixes. Cela dit, il vaut la peine de vérifier les paramètres de votre thème en allant dans Apparence » Personnaliser dans le tableau de bord WordPress et en recherchant des paramètres intitulés « Menus ».
Si vous n'êtes pas sûr que votre thème prenne en charge les menus fixes, vous pouvez consulter la documentation du thème ou même contacter le développeur pour obtenir de l'aide. Pour plus d'informations, veuillez consulter notre guide sur comment demander correctement le support WordPress et l'obtenir.
Si votre thème ne prend pas en charge nativement les menus fixes, vous devrez utiliser l'une des autres méthodes ci-dessous.
Méthode 2 : Ajouter votre menu de navigation fixe à l'aide d'un plugin (Recommandé)
Le moyen le plus simple d'ajouter un menu de navigation fixe dans WordPress est d'utiliser le plugin Sticky Menu & Sticky Header. Il vous permet de rendre n'importe quoi fixe, y compris les menus.
Tout d'abord, vous devrez installer et activer le plugin. Si vous avez besoin d'aide, veuillez consulter notre guide pour débutants sur comment installer un plugin WordPress.
Après l'activation, allez dans Réglages » Sticky Menu (or Anything!).
Pour commencer, vous devrez obtenir l'ID CSS du menu de navigation que vous souhaitez rendre fixe en utilisant l'outil d'inspection de votre navigateur.
Visitez simplement votre site Web et placez votre souris sur le menu de navigation. Ensuite, faites un clic droit et sélectionnez « Inspecter » dans le menu du navigateur.
Cela ouvrira un nouveau panneau dans le navigateur, où vous pourrez voir le code source du menu de navigation.
Vous devez trouver la ligne de code qui concerne le menu ou l'en-tête de votre site. Elle ressemblera à ceci :
<nav id="site-navigation" class="main-navigation" role="navigation">
Si vous avez du mal à trouver le code, placez votre souris sur les différentes lignes de code dans le panneau « Inspecter ». Lorsque vous trouverez le bon code, le navigateur mettra en surbrillance le menu de navigation, comme vous pouvez le voir dans l'image suivante.
Dans ce cas, l'ID CSS du menu de navigation est site-navigation.
Une fois que vous avez ces informations, retournez à votre tableau de bord WordPress et ajoutez-les dans le champ « Élément fixe (Requis) ».
Vous devrez également ajouter un caractère dièse (#) au début, donc site-navigation devient #site-navigation.
Après cela, cliquez sur le bouton « Enregistrer les modifications » en bas de la page pour sauvegarder vos changements.
Maintenant, si vous visitez votre site WordPress et faites défiler, le menu devrait rester en haut.
Parfois, le menu fixe peut chevaucher certains contenus que vous ne souhaitez pas masquer.
Si cela se produit, vous devrez définir un espace entre le haut de votre écran et le menu de navigation fixe en saisissant un nombre dans le champ « Espace entre le haut de la page et l'élément fixe ».
Les menus fixes peuvent causer des problèmes pour les appareils avec des écrans plus petits, tels que les appareils mobiles. Dans cet esprit, il est conseillé de vérifier la version mobile de votre site WordPress depuis votre ordinateur.
Si vous n'êtes pas satisfait de l'apparence du menu, vous pouvez le « défixer » pour les utilisateurs mobiles en trouvant le champ suivant : « Ne pas fixer l'élément lorsque l'écran est plus petit que ».
Ici, tapez « 780px ».
Il y a d'autres paramètres à explorer, mais c'est tout ce dont vous avez besoin pour créer un menu de navigation fixe fonctionnel.
Lorsque vous êtes satisfait de la configuration du menu de navigation, cliquez sur « Enregistrer les modifications » pour sauvegarder vos paramètres.
Méthode 3 : Ajouter un menu de navigation flottant fixe à l'aide de code
Vous pouvez également créer un menu de navigation fixe en utilisant CSS.
La meilleure façon d'ajouter du code personnalisé à WordPress est d'utiliser WPCode. C'est le meilleur plugin d'extraits de code qui vous permet d'ajouter du CSS, du PHP, du HTML personnalisé, et plus encore.
Comme vous n'éditez pas directement les fichiers du thème, vous pouvez éviter de nombreuses erreurs WordPress courantes. Vous pouvez également mettre à jour votre thème ou passer à un thème complètement différent sans perdre votre code personnalisé.
Vous pouvez également activer et désactiver le menu fixe en un seul clic.
Tout d'abord, vous devrez installer et activer le plugin gratuit WPCode. Pour plus d'informations, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Une fois le plugin activé, accédez à la page Snippets de code » + Ajouter un snippet, où vous verrez tous les snippets WPCode prêts à l'emploi que vous pouvez ajouter à votre site.
Ceux-ci incluent un snippet qui vous permet de désactiver complètement les commentaires, de téléverser des types de fichiers que WordPress ne prend pas normalement en charge, désactiver les pages de pièces jointes, et bien plus encore.
Ici, survolez simplement votre souris sur « Ajouter votre code personnalisé (Nouveau snippet) » et cliquez sur le bouton « Utiliser le snippet » lorsqu'il apparaît.
Sur l'écran suivant, vous devez taper un titre pour le snippet de code. Ceci est juste pour votre référence, vous pouvez donc utiliser ce que vous voulez.
Ensuite, ouvrez le menu déroulant « Type de code » et choisissez « Snippet CSS ».
Une fois cela fait, ajoutez le snippet suivant dans l'éditeur de code WPCode :
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Ceci créera un menu de navigation avec un fond noir. Vous pouvez utiliser la couleur de votre choix en modifiant le code hexadécimal à côté de background.
Par exemple, utiliser background: #ffffff vous donnera un fond de menu blanc. Si vous n'êtes pas sûr du code hexadécimal à utiliser, vous pouvez consulter une ressource telle que Code couleur HTML.
Vous devrez également remplacer #site-navigation par l'ID CSS de votre menu de navigation. Pour trouver ce code, suivez simplement le même processus décrit ci-dessus.
Lorsque vous êtes satisfait du code, cliquez sur le bouton bascule « Inactif » pour qu'il devienne « Actif », puis cliquez sur le bouton « Enregistrer l'extrait ».
Maintenant, si vous visitez votre blog ou site Web WordPress, vous verrez le menu de navigation flottant et fixe en action.
Selon votre thème, le menu de navigation peut parfois apparaître en dessous de l'en-tête du site au lieu d'au-dessus. Dans ce cas, le menu de navigation fixe pourrait apparaître trop près du titre et de l'en-tête du site, voire les chevaucher.
Si cela se produit, vous pouvez ajouter ce qui suit à votre extrait CSS personnalisé :
.site-branding {
margin-top:60px !important;
}
Remplacez simplement site-branding par la classe CSS de votre zone d'en-tête. Pour obtenir cette information, utilisez simplement l'outil « Inspecter » de votre navigateur, puis suivez le même processus décrit dans la méthode 2.
Bonus : Rendre vos articles WordPress fixes
Si vous avez un blog WordPress, il est judicieux de rendre certains de vos articles de blog « collants ». Il peut s'agir des articles piliers qui incluent le contenu le plus important de votre site ou des annonces et des articles de concours avec lesquels vous souhaitez que les utilisateurs interagissent.
Lorsque vous rendez un article de votre choix « collant », il restera en haut de votre page de blog même lorsque vous publierez du nouveau contenu, qui sera affiché sous l'article collant.
Vous pouvez facilement rendre votre article de blog « collant » en l'ouvrant dans l'éditeur de contenu. Une fois que vous avez fait cela, développez simplement l'onglet « Résumé » dans le panneau de blocs et cochez l'option « Épingler en haut du blog ».
Après cela, cliquez sur le bouton « Mettre à jour » ou « Publier » en haut pour enregistrer vos paramètres. Vous avez maintenant créé avec succès un article de blog « collant » sur votre site WordPress.
Pour plus de détails, consultez notre tutoriel sur comment rendre les articles collants dans WordPress.
Nous espérons que cet article vous a aidé à ajouter un menu de navigation flottant et fixe à votre site WordPress. Vous pourriez également consulter notre guide pour débutants sur comment ajouter un menu de panneau coulissant dans les thèmes WordPress et notre tutoriel sur l'ajout d'icônes de médias sociaux au menu WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Dennis Muthomi
y a-t-il un moyen de faire en sorte que le menu fixe ne s'applique qu'à certains articles/pages ? Par exemple, le rendre non fixe sur la page d'accueil de mon blog mais fixe partout ailleurs sur le site web ?
Support WPBeginner
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Admin
Mrteesurez
Bien conçu, je suis heureux de voir le plugin que vous avez partagé ici « menu collant ou (n’importe quoi) au défilement ». Cela signifie qu’il peut être utilisé pour rendre collant n’importe quel élément à part le menu.
Initialement, j’utilisais du code brut pour cela, merci d’avoir partagé cette méthode facile.
Dayo Olobayo
Je suis d'accord Mrteesurez, les menus fixes sont une fonctionnalité précieuse pour un site web. En plus de créer un menu fixe, vous pourriez également envisager d'incorporer un effet de « défilement fluide » pour améliorer encore l'expérience utilisateur lors de la navigation entre les sections de votre page web.
Jiří Vaněk
Merci pour le tutoriel. J'ai toujours cherché un modèle qui puisse faire cela. Selon ce guide, je n'ai plus à le faire.
Support WPBeginner
Glad we could help open up your theme options
Admin
Paul
Où dois-je laisser les 5 étoiles…..merci beaucoup !!
Support WPBeginner
Glad our guide was helpful
Admin
Jess
Merci beaucoup pour ce post utile !!! Tellement clair et facile à suivre.
Support WPBeginner
Glad our guide was helpful
Admin
Ivaylo
Excellent tutoriel pratique. J'ai utilisé la méthode 2 et cela a fonctionné instantanément, mais lorsque j'ouvre le site sur mobile, les boutons du menu ont disparu. Quelqu'un sait pourquoi ou comment résoudre ce problème ?
Santé !
Support WPBeginner
Si vous ne l'avez pas encore fait, nous vous recommandons de vérifier auprès du support de votre thème spécifique pour voir s'il pourrait y avoir un conflit avec le CSS de votre thème
Admin
Serena Richardson
Bonjour,
Comment puis-je créer un menu flottant et fixe sur le côté droit d'une page plutôt qu'en haut, de sorte qu'il descende au fur et à mesure que l'on fait défiler la page.
Merci !
Serena
Support WPBeginner
Il s'agirait d'ajouter un widget fixe, pour lequel nous avons une recommandation dans notre article ci-dessous :
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Admin
Tom Browne
A fonctionné instantanément. Merci
Support WPBeginner
You’re welcome
Admin
simran
niveau de perfection et la façon de présenter l'information… merci..
Support WPBeginner
Glad our guide was helpful
Admin
Theo
Où puis-je trouver l'identifiant de ma barre de navigation ?
Je ne le trouve pas.
Support WPBeginner
Pour ce faire, vous utiliseriez l'outil d'inspection d'éléments. Nous avons un guide sur la façon d'utiliser correctement l'outil d'inspection d'éléments ci-dessous :
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Admin
Natasha T
Une bouée de sauvetage, je ne vous remercierai jamais assez.
Support WPBeginner
You’re welcome
Admin
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
Support WPBeginner
Glad our article was helpful
Admin
alexandre
Exactement ce que je cherchais ! Excellent plugin. Merci
Support WPBeginner
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey
Merci beaucoup pour votre aide – juste une petite question ; l'arrière-plan de mon menu est transparent lorsque je fais défiler vers le bas. Des solutions rapides ou des astuces pour y ajouter une couleur unie (blanche dans notre cas) ?
Support WPBeginner
Cela dépendrait de la façon dont votre menu est configuré, mais vous pouvez utiliser l'outil d'inspection pour trouver l'élément auquel vous pouvez définir la propriété `background-color` : https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Manish
Merci. Quand Wpbeginner écrit un article de blog sur un sujet, il est forcément utile.
Support WPBeginner
Glad our content has been helpful
Admin
Everest
Merci beaucoup.
Vous avez illuminé ma journée.
Support WPBeginner
You’re welcome, glad we could help
Admin
Tony Chung
Le code CSS a fonctionné et j'ai dû ajouter une marge à l'en-tête pour que le titre entier s'affiche. Ma barre de menu s'étend sur le dessus, mais les boutons du menu commencent à gauche et s'arrêtent au milieu. Comment puis-je déplacer les boutons pour qu'ils soient centrés sur la page ?
Support WPBeginner
Cela varierait d'un thème à l'autre, mais vous auriez normalement besoin de modifier le CSS. Vous pouvez tester les modifications en utilisant l'outil d'inspection : https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Chinedu
Wow, ça marche parfaitement.
Merci
Support WPBeginner
Glad our solution worked for you
Admin
Gillian Davies
J'ai une liste de livres dans un tableau. J'ai importé les images de leurs couvertures dans la médiathèque, maintenant je veux que les images apparaissent en survol lorsque l'on fait défiler la liste. Similaire à un survol de ligne, mais comment faire cela dans un tableau créé avec le table maker ?
Raul
Comment puis-je rendre ce menu de navigation fixe déroulant ?
Je l'ai utilisé pour une barre latérale, mais quand la barre latérale est trop longue, elle ne rentre pas sur l'écran et je ne peux pas la faire défiler vers le bas.
Rushikesh Thawale
Bonjour,
Comment avez-vous écrit le code COMME UN CODE dans ce post ? Je veux dire comment afficher des codes HTML comme celui-ci dans un post ?
Merci.
Tara
Vous l'avez probablement déjà découvert, mais pour ceux qui cherchent, pour afficher votre code dans votre post, utilisez le caractère html pour la parenthèse ouvrante des balises html < ; sans l'espace.
Support WPBeginner
C'est une méthode, mais pour cela, nous utilisons la deuxième méthode dans notre article ici : https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Admin
Cesar
Great post! your CSS code works for me
dani
Alain
Très utile !
merci.
amin
Vous pouvez également utiliser « z-index: 999xxxx » pour le logo ou tout autre élément que vous souhaitez placer dans la barre de navigation
Sujith Reghu
Je voudrais savoir comment ajouter un menu fixe à l'intérieur d'un article ou d'une page WordPress. Par exemple, pour un long article, les titres et sous-titres de l'article lui-même seraient présentés dans le menu fixe afin qu'un lecteur puisse facilement naviguer d'une section à une autre dans l'article. Merci...
Zac
merci pour le tutoriel !
ce dont j'ai besoin est un peu différent, j'ai besoin d'un 'mini-menu' qui apparaisse lorsque vous survolez le menu... donc il ne s'affiche pas tant que vous ne survolez pas... comme un menu déroulant
si vous pouviez faire ce tutoriel, je vous en serais reconnaissant.
amin
vous pouvez utiliser un plugin mega-menu ou un plugin uber menu, mais vous pouvez le faire sans plugin, avec css ou jquery, comme le menu bootstrap3