Mostra il menu su un selettore CSS

Guida pratica Tutti i piani 3 min di lettura

L’app posiziona il menu dentro ogni elemento corrispondente, sostituendone il contenuto. Usala su temi personalizzati o molto modificati dove Automatico e Sostituisci navigazione non funzionano, per un punto specifico, oppure per menu solo desktop o solo mobile.

Nota

L’app consiglia questa opzione agli sviluppatori, o quando le altre opzioni non funzionano. Non ti senti sicuro con i selettori CSS? Contattaci e installiamo noi il menu per te gratuitamente.

Configura i selettori CSS

1. Seleziona Mostra il menu su questo selettore CSS

   Nell’editor dei menu, fai clic sulla scheda Impostazioni nella barra a sinistra. In Posizione, scegli Mostra il menu su questo selettore CSS.

   

   Mostra il menu su questo selettore CSS con i suoi due campi dei selettori

2. Inserisci i selettori

   Compila i due campi descritti in Impostazioni. #SiteNav e #AccessibleNav in grigio sono segnaposto, non valori salvati.

3. Salva e pubblica

   Fai clic su Salva, poi pubblica il menu. Controlla il tuo negozio su desktop e su mobile.

Impostazioni

Selettore CSS del tuo menu principale

L’elemento che contiene il tuo menu desktop, ad esempio #SiteNav, .header__inline-menu o nav.main-menu. Lascialo vuoto per mostrare il menu solo su mobile.

Selettore CSS del tuo menu mobile

L’elemento che contiene il tuo menu mobile, ad esempio #AccessibleNav o .menu-drawer. Lascialo vuoto per mantenere il menu mobile del tuo tema (solo desktop).

• Più elementi — separa i selettori con virgole, ad esempio .header__inline-menu, .sticky-header nav. Il menu viene inserito in ogni elemento corrispondente.
• Un solo elemento per entrambi i layout — inserisci lo stesso selettore in entrambi i campi. L’app passa dal layout desktop a quello mobile in base alle dimensioni dello schermo.
• Scegli il contenitore, non un singolo link — seleziona l’elemento che racchiude l’intero menu (di solito un <nav> o un <ul>), altrimenti il menu finisce dentro una sola voce.
• Preferisci selettori stabili — ID o classi del tema come .header__inline-menu. I selettori generati come body > div:nth-child(3) > … smettono di funzionare quando il tema cambia.

Trova un selettore CSS

Puoi anche fare clic su Come trovare il selettore CSS del tuo menu? sotto i campi.

1. Ispeziona il menu

   Apri il tuo negozio in Chrome, fai clic con il pulsante destro sul menu e scegli Ispeziona.

2. Trova il contenitore del menu

   Nel pannello Elementi, passa il mouse sui tag. Trova il <nav> o <ul> più vicino la cui evidenziazione copre l’intero menu.

3. Copia il selettore

   Usa # più il suo id (#SiteNav) oppure . più una classe chiara (.header__inline-menu). In alternativa, fai clic con il pulsante destro sul tag, scegli Copia > Copia selettore e incollalo nell’app.

4. Ripeti per il mobile

   Fai clic sull’icona del dispositivo negli strumenti per sviluppatori, scegli un dispositivo mobile e apri il menu mobile (icona hamburger). Ripeti per ottenere il selettore mobile.

Consiglio

Prova un selettore prima di salvarlo: nella Console degli strumenti per sviluppatori, esegui document.querySelectorAll('your-selector'). Un elenco vuoto significa che il selettore è sbagliato.

Vuoi il menu dove il tuo tema non ha alcun menu? Vedi Aggiungi una posizione personalizzata per il menu.

Pagine correlate

• Aggiungi una posizione personalizzata per il menuMostra il menu esattamente dove vuoi aggiungendo un tuo contenitore al codice del tema.
• Posso usare menu diversi su desktop e su mobile?Mostra un menu sul desktop e un altro su mobile, oppure nascondi alcune voci in base al dispositivo.
• Perché il mio menu non compare nel negozio?Una checklist passo passo per quando il menu non compare nel tuo negozio o ha un aspetto sbagliato.

Questa pagina ti è stata utile?

Segnala un problema