Modalità debug - Trova selettori CSS

La modalità debug è un insieme di strumenti leggeri integrati nella libreria Navi+ che ti aiuta a lavorare in modo più efficace con i menu Navi+.

1. Trova selettori CSS

Per abilitare la modalità debug, utilizza il seguente formato URL: yourdomain.com#navidebug-on

Il tuo sito web passerà alla Modalità Debug di Navi+. Passa il mouse su diverse aree del sito web per visualizzare i loro corrispondenti selettori CSS. Muovi il cursore per localizzare con precisione l’area target desiderata.

Si prega di prestare attenzione alle scorciatoie da tastiera qui sotto per lavorare in modo più efficiente.

Scorciatoia 1. Copiare un selettore CSS

  • Premi ⌘+C su MacOS o Ctrl+C su Windows per copiare il selettore CSS selezionato.

Puoi quindi incollarlo nelle impostazioni del Publish Menu per:

  • Mega Menu / Grid Menu: per inserire il menu prima, dopo o sostituire il selettore CSS target
  • Slide Menu: per attivare il menu a scorrimento quando il selettore CSS target viene cliccato o toccato

Scorciatoia 2. Navigare tra i livelli di selettore

  • Premi [↑/←], o Backspace per passare a un selettore di livello genitore
  • Premi [↓/→] per passare a un selettore di livello figlio

Suggerimenti importanti: Nella maggior parte dei casi, non troverai immediatamente il selettore CSS perfetto. Basandosi sull’esperienza, è spesso più facile:

  1. Iniziare selezionando un selettore di livello figlio
  2. Poi salire di 1–2 livelli genitori (un evidenziatore visivo apparirà sul tuo sito web)
  3. Copiare il selettore usando ⌘+C (Ctrl+C)
  4. Incollarlo nella configurazione del menu e testare

A volte, potrebbe essere necessario ripetere questo processo più volte quando si inseriscono, sostituiscono o collegano eventi di menu ai selettori CSS per ottenere l’esperienza utente desiderata.

1.1. Trova il selettore CSS su Desktop

1.2. Trova il selettore CSS su Mobile

Per trovare un selettore CSS su mobile, abilita la modalità Mobile (Responsive) nel tuo browser. Poi fai clic destro in qualsiasi punto della pagina e seleziona:

  • Chrome: Ispeziona
  • Safari: Ispeziona elemento
  • Firefox: Ispeziona
  • Edge: Ispeziona / Ispeziona elemento