Créer un menu de navigation sticky sur wordpress

Qu’est-ce qu’un menu de navigation flottant collant?

Un menu de navigation fixe ou flottant est un menu qui «colle» en haut de l’écran lorsque l’utilisateur fait défiler vers le bas. Cela rend votre menu visible aux utilisateurs à tout moment.

Voici un menu fixe en action. Nous allons vous montrer comment créer un menu exactement comme celui-ci pour votre propre site:

Pourquoi et quand les menus collants peuvent être utiles?

Habituellement, le menu de navigation supérieur contient des liens vers les sections les plus importantes d’un site Web. Un menu flottant rend ces liens toujours visibles, ce qui évite aux utilisateurs de revenir en haut. Il est également prouvé qu’il augmente les conversions.

Si vous exploitez une boutique en ligne, votre menu de navigation supérieur comprend probablement des liens vers le panier, les catégories de produits et la recherche de produits. Rendre ce menu collant peut vous aider à réduire les abandons de panier et à augmenter les ventes.

Certains des meilleurs thèmes WordPress ont un support intégré pour un menu de navigation collant. Consultez simplement les paramètres de votre thème sous Thèmes »Personnaliser pour activer cette fonctionnalité.

Si votre thème n’a pas cette option, continuez à lire et nous vous montrerons comment créer facilement un menu de navigation flottant collant dans n’importe quel thème WordPress ou boutique WooCommerce.

Méthode 1: Ajoutez votre menu de navigation flottant collant à l’aide d’un plug-in

C’est la méthode la plus simple. Nous le recommandons à tous les utilisateurs de WordPress, en particulier aux débutants.

Si vous n’avez pas encore configuré votre menu de navigation, continuez et faites-le en utilisant nos instructions sur la façon d’ajouter un menu de navigation dans WordPress.

Après cela, vous devez installer et activer le Sticky Menu (ou Anything!) Sur le plugin Scroll. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Lors de l’activation, vous devez visiter la page Paramètres »Sticky Menu (ou Anything!) Pour configurer les paramètres du plugin.

Vous devez d’abord entrer l’ID CSS du menu de navigation que vous souhaitez rendre collant.

Vous devrez utiliser l’outil d’inspection de votre navigateur pour trouver l’ID CSS utilisé par votre menu de navigation.

Visitez simplement votre site Web et amenez votre souris dans le menu de navigation. Après cela, vous devez cliquer avec le bouton droit de la souris et sélectionner Inspecter dans le menu de votre navigateur.

Cela divisera l’écran de votre navigateur et vous pourrez voir le code source de votre menu de navigation.

Vous devez trouver une ligne de code relative à votre navigation ou à l’en-tête de votre site. Cela ressemblera à quelque chose comme ceci:

1 <nav id = « site-navigation » class = « main-navigation » role = « navigation »>
Si vous avez du mal à le trouver, placez le curseur de votre souris sur les différentes lignes de code dans le volet Inspecter. Le menu de navigation sera entièrement mis en évidence lorsque vous avez la bonne ligne de code

Dans ce cas, l’ID CSS de notre menu de navigation est la navigation sur le site.

Tout ce que vous avez à faire est de saisir l’ID CSS de votre menu dans les paramètres du plugin avec un hachage au début. Dans ce cas, c’est # site-navigation.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » en bas de la page.

Maintenant, allez-y et consultez votre menu collant en direct sur votre site Web WordPress. Il devrait rester sur la page lorsque vous faites défiler vers le bas, comme ceci:

L’option suivante sur la page des paramètres du plugin est de définir l’espace entre le haut de votre écran et le menu de navigation persistant. Vous ne devez utiliser ce paramètre que si votre menu chevauche un élément que vous ne souhaitez pas masquer. Sinon, ignorez ce paramètre.

Nous vous recommandons de laisser la case cochée à côté de l’option: « Vérifier la barre d’administration ». Cela permet au plugin d’ajouter de l’espace pour la barre d’administration WordPress, qui n’est visible que par les utilisateurs connectés.

Ici, vous pouvez voir que la barre d’administration de notre site de test s’affiche correctement au-dessus du menu collant:

L’option suivante vous permet de décocher le menu de navigation si un utilisateur visite votre site Web à l’aide d’un écran plus petit tel qu’un appareil mobile:

Vous pouvez tester l’apparence de votre site sur les appareils mobiles ou les tablettes. Si vous n’aimez pas son apparence, ajoutez simplement 780 pixels pour cette option.

N’oubliez pas de cliquer sur le bouton Enregistrer les modifications après avoir apporté des modifications à vos options.

Méthode 2: ajouter manuellement un menu de navigation flottant collant

Cette méthode vous oblige à ajouter du code CSS personnalisé à votre thème. Nous ne le recommandons pas aux débutants.

Nous vous recommandons également de consulter notre guide sur la façon d’ajouter facilement du CSS personnalisé à votre site WordPress avant de commencer.

Tout d’abord, vous devez visiter Apparence »Personnaliser pour lancer le personnalisateur de thème WordPress.

Ensuite, cliquez sur « CSS supplémentaire » dans le volet de gauche, puis ajoutez ce code CSS.

# site-navigation {
arrière-plan: # 00000;
hauteur: 60px;
indice z: 170;
marge: 0 auto;
bordure inférieure: 1px solide #dadada;
largeur: 100%;
position: fixe;
haut: 0;
gauche: 0;
droite: 0;
text-align: centre;
}

Remarque: Cela produira un menu de navigation avec un arrière-plan noir. Si vous voulez une couleur différente, changez le nombre en regard de l’arrière-plan. Par exemple, en utilisant background: #ffffff vous donnera un arrière-plan de menu blanc.

Remplacez simplement # site-navigation par l’ID CSS de votre menu de navigation puis cliquez sur le bouton Publier en haut de l’écran.

Allez-y et visitez votre site Web pour voir votre menu de navigation flottant collant en action:

Que faire si votre menu de navigation apparaît normalement sous l’en-tête du site plutôt qu’au-dessus? Si tel est le cas, ce code CSS peut chevaucher le titre et l’en-tête du site ou apparaître trop près de celui-ci avant que l’utilisateur ne fasse défiler:

Cela peut être facilement ajusté en ajoutant une marge à votre zone d’en-tête à l’aide d’un code CSS supplémentaire:

.site-branding {
margin-top: 60px! important;
}
Remplacez la marque du site par la classe CSS de votre zone d’en-tête. Désormais, le menu de navigation persistant ne chevauchera plus votre en-tête avant que l’utilisateur ne fasse défiler vers le bas:

Nous espérons que cet article vous a aidé à ajouter un menu de navigation flottant collant à votre site WordPress.

Partager:

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

À voir également