Mode débogage - Trouver des sélecteurs CSS

Le mode débogage est un ensemble d’outils léger intégré à la bibliothèque Navi+ qui vous aide à travailler plus efficacement avec les menus Navi+.

1. Trouver des sélecteurs CSS

Pour activer le mode débogage, utilisez le format d’URL suivant :
yourdomain.com#navidebug-on

Votre site web passera en mode débogage Navi+. Survolez différentes zones du site web pour voir leurs sélecteurs CSS correspondants. Déplacez votre curseur pour localiser précisément la zone cible souhaitée.

Veuillez prêter attention aux raccourcis clavier ci-dessous pour travailler plus efficacement.

Raccourci 1. Copier un sélecteur CSS

  • Appuyez sur ⌘+C sur MacOS ou Ctrl+C sur Windows pour copier le sélecteur CSS sélectionné.

Vous pouvez ensuite le coller dans les paramètres du Publish Menu pour :

  • Mega Menu / Grid Menu : pour insérer le menu avant, après ou remplacer le sélecteur CSS cible
  • Slide Menu : pour déclencher le slide menu lorsque le sélecteur CSS cible est cliqué ou tapé

Raccourci 2. Naviguer entre les niveaux de sélecteurs

  • Appuyez sur [↑/←], ou Backspace pour passer à un sélecteur de niveau parent
  • Appuyez sur [↓/→] pour passer à un sélecteur de niveau enfant

Conseils importants : Dans la plupart des cas, vous ne trouverez pas immédiatement le sélecteur CSS parfait. D’après l’expérience, il est souvent plus facile de :

  1. Commencer par sélectionner un sélecteur de niveau enfant
  2. Puis remonter de 1 à 2 niveaux parents (un surlignage visuel apparaîtra sur votre site web)
  3. Copier le sélecteur en utilisant ⌘+C (Ctrl+C)
  4. Le coller dans la configuration du menu et tester

Parfois, vous devrez peut-être répéter ce processus plusieurs fois lors de l’insertion, du remplacement ou de la liaison d’événements de menu aux sélecteurs CSS afin d’obtenir l’expérience utilisateur souhaitée.

1.1. Trouver le sélecteur CSS sur Desktop

1.2. Trouver le sélecteur CSS sur Mobile

Pour trouver un sélecteur CSS sur mobile, activez le mode Mobile (Responsive) dans votre navigateur.
Ensuite, faites un clic droit n’importe où sur la page et sélectionnez :

  • Chrome : Inspecter
  • Safari : Inspecter l’élément
  • Firefox : Inspecter
  • Edge : Inspecter / Inspecter l’élément