Vis menyen på en CSS-velger

Veiledning Alle planer 2 min lesing

Appen plasserer menyen inne i hvert element som samsvarer, og erstatter innholdet. Bruk dette i egendefinerte eller kraftig redigerte temaer der Erstatt automatisk og Bytt ut navigering ikke fungerer, for et bestemt sted, eller for menyer bare på datamaskin eller bare på mobil.

Merknad

Appen anbefaler dette alternativet for utviklere, eller når de andre alternativene ikke fungerer. Er du ikke komfortabel med CSS-velgere? Kontakt oss, så installerer vi menyen gratis for deg.

Konfigurer CSS-velgerne

1. Velg Vis menyen på denne CSS-velgeren

   I menyredigeringen klikker du på fanen Innstillinger i sidefeltet til venstre. Under Posisjon velger du Vis menyen på denne CSS-velgeren.

   

   Vis menyen på denne CSS-velgeren med de to feltene for velgere

2. Skriv inn velgerne

   Fyll ut de to feltene som er beskrevet under Innstillinger. De grå #SiteNav og #AccessibleNav er plassholdere, ikke lagrede verdier.

3. Lagre og publiser

   Klikk på Lagre, og publiser menyen. Sjekk butikken på datamaskin og mobil.

Innstillinger

CSS-velger for hovedmenyen

Elementet som inneholder menyen på datamaskin, for eksempel #SiteNav, .header__inline-menu eller nav.main-menu. La feltet stå tomt for å vise menyen bare på mobil.

CSS-velger for mobilmenyen

Elementet som inneholder menyen på mobil, for eksempel #AccessibleNav eller .menu-drawer. La feltet stå tomt for å beholde temaets mobilmeny (bare datamaskin).

• Flere elementer – skill velgerne med komma, for eksempel .header__inline-menu, .sticky-header nav. Menyen settes inn i hvert treff.
• Ett element for begge oppsettene – skriv inn den samme velgeren i begge feltene. Appen bytter mellom oppsett for datamaskin og mobil etter skjermstørrelse.
• Velg beholderen, ikke én enkelt lenke – velg elementet som omslutter hele menyen (vanligvis en <nav> eller <ul>), ellers havner menyen inne i ett element.
• Foretrekk stabile velgere – ID-er eller temaklasser som .header__inline-menu. Genererte velgere som body > div:nth-child(3) > … slutter å fungere når temaet endres.

Finn en CSS-velger

Du kan også klikke på Hvordan finner du CSS-velgeren for menyen din? under feltene.

1. Inspiser menyen

   Åpne butikken i Chrome, høyreklikk på menyen og velg Inspect (inspiser).

2. Finn menybeholderen

   I panelet Elements holder du musepekeren over taggene. Finn nærmeste <nav> eller <ul> der uthevingen dekker hele menyen.

3. Kopier velgeren

   Bruk # pluss id (#SiteNav) eller . pluss en tydelig klasse (.header__inline-menu). Ellers høyreklikker du på taggen, velger Copy > Copy selector (kopier velger) og limer den inn i appen.

4. Gjenta for mobil

   Klikk på enhetsikonet i DevTools, velg en telefon og åpne mobilmenyen (hamburgerikonet). Gjenta for å finne velgeren for mobil.

Tips

Test en velger før du lagrer den: I Console i DevTools kjører du document.querySelectorAll('your-selector'). En tom liste betyr at velgeren er feil.

Vil du ha menyen et sted der temaet ikke har noen meny i det hele tatt? Se Legg til en egendefinert menyposisjon.

Relaterte sider

• Legg til en egendefinert menyposisjonVis menyen akkurat der du vil, ved å legge til din egen beholder i temakoden.
• Kan jeg bruke ulike menyer på datamaskin og mobil?Vis én meny på datamaskin og en annen på mobil, eller skjul enkelte elementer per enhet.
• Hvorfor vises ikke menyen i butikken min?En sjekkliste steg for steg når menyen mangler i butikken eller ser feil ut.

Var dette nyttig?

Rapporter et problem