Afficher le menu sur un sélecteur CSS

Guide pratique Tous les forfaits 3 min de lecture

L’application place votre menu à l’intérieur de chaque élément correspondant, en remplaçant son contenu. Utilisez cette option sur les thèmes personnalisés ou fortement modifiés où Remplacer automatiquement et Remplacer le menu existant ne fonctionnent pas, pour un emplacement précis, ou pour des menus réservés à l’ordinateur ou au mobile.

Note

L’application recommande cette option aux développeurs, ou lorsque les autres options ne fonctionnent pas. Les sélecteurs CSS ne vous sont pas familiers ? Contactez-nous et nous installons le menu pour vous gratuitement.

Configurer les sélecteurs CSS

1. Sélectionner Afficher le menu sur ce sélecteur CSS

   Dans l’éditeur de menu, cliquez sur l’onglet Paramètres dans la barre de gauche. Sous Position, choisissez Afficher le menu sur ce sélecteur CSS.

   

   Afficher le menu sur ce sélecteur CSS avec ses deux champs de sélecteur

2. Saisir les sélecteurs

   Renseignez les deux champs décrits dans Paramètres. Les #SiteNav et #AccessibleNav en gris sont des exemples de texte indicatif, pas des valeurs enregistrées.

3. Enregistrer et publier

   Cliquez sur Enregistrer, puis publiez le menu. Vérifiez votre boutique sur ordinateur et sur mobile.

Paramètres

Sélecteur CSS de votre menu principal

L’élément qui contient votre menu pour ordinateur, par exemple #SiteNav, .header__inline-menu ou nav.main-menu. Laissez-le vide pour n’afficher le menu que sur mobile.

Sélecteur CSS de votre menu mobile

L’élément qui contient votre menu mobile, par exemple #AccessibleNav ou .menu-drawer. Laissez-le vide pour conserver le menu mobile de votre thème (ordinateur uniquement).

• Plusieurs éléments : séparez les sélecteurs par des virgules, par exemple .header__inline-menu, .sticky-header nav. Le menu est placé dans chaque élément correspondant.
• Un seul élément pour les deux dispositions : saisissez le même sélecteur dans les deux champs. L’application bascule entre la disposition ordinateur et mobile selon la taille de l’écran.
• Choisissez le conteneur, pas un seul lien : ciblez l’élément qui enveloppe tout le menu (généralement un <nav> ou un <ul>), sinon le menu se retrouve à l’intérieur d’un seul élément.
• Privilégiez des sélecteurs stables : des ID ou des classes du thème comme .header__inline-menu. Les sélecteurs générés comme body > div:nth-child(3) > … cessent de fonctionner quand le thème change.

Trouver un sélecteur CSS

Vous pouvez aussi cliquer sur Comment trouver le sélecteur CSS de votre menu ? sous les champs.

1. Inspecter le menu

   Ouvrez votre boutique dans Chrome, faites un clic droit sur le menu et choisissez Inspecter.

2. Trouver le conteneur du menu

   Dans le panneau Éléments, survolez les balises. Trouvez le <nav> ou le <ul> le plus proche dont la surbrillance couvre tout le menu.

3. Copier le sélecteur

   Utilisez # suivi de son id (#SiteNav) ou . suivi d’une classe claire (.header__inline-menu). Sinon, faites un clic droit sur la balise, choisissez Copier > Copier le sélecteur et collez-le dans l’application.

4. Recommencer pour mobile

   Cliquez sur l’icône d’appareil dans les DevTools, choisissez un téléphone et ouvrez le menu mobile (icône hamburger). Recommencez pour obtenir le sélecteur mobile.

Astuce

Testez un sélecteur avant de l’enregistrer : dans la Console des DevTools, exécutez document.querySelectorAll('your-selector'). Une liste vide signifie que le sélecteur est incorrect.

Vous voulez le menu là où votre thème n’a aucun menu ? Voir Ajouter une position de menu personnalisée.

Pages associées

• Ajouter une position de menu personnaliséeAffichez le menu exactement où vous le souhaitez en ajoutant votre propre conteneur au code du thème.
• Puis-je utiliser des menus différents sur ordinateur et sur mobile ?Affichez un menu sur ordinateur et un autre sur mobile, ou masquez certains éléments selon l'appareil.
• Pourquoi mon menu ne s'affiche-t-il pas sur ma boutique ?Une liste de vérifications pas à pas lorsque le menu est absent de votre boutique en ligne ou s'affiche mal.

Cette page vous a-t-elle aidé ?

Signaler un problème