Vis menuen på en CSS-vælger

Vejledning Alle abonnementer 2 min. læsning

Appen placerer din menu inde i hvert element, der matcher, og erstatter dets indhold. Brug den på brugerdefinerede eller meget redigerede temaer, hvor Automatisk og Udskift navigation ikke virker, til et bestemt sted eller til menuer kun til computer eller kun til mobil.

Note

Appen anbefaler denne mulighed til udviklere, eller når de andre muligheder ikke virker. Er du ikke tryg ved CSS-vælgere? Kontakt os, så installerer vi menuen gratis for dig.

Konfigurer CSS-vælgerne

1. Vælg Vis menuen på denne CSS-vælger

   Klik på fanen Indstillinger i venstre bjælke i menueditoren. Vælg Vis menuen på denne CSS-vælger under Position.

   

   Vis menuen på denne CSS-vælger med de to felter til vælgere

2. Angiv vælgerne

   Udfyld de to felter, der er beskrevet under Indstillinger. De grå #SiteNav og #AccessibleNav er pladsholdere, ikke gemte værdier.

3. Gem og udgiv

   Klik på Gem, og udgiv derefter menuen. Tjek din webshop på computer og på mobil.

Indstillinger

CSS-vælger til din hovedmenu

Det element, der indeholder din menu på computer, f.eks. #SiteNav, .header__inline-menu eller nav.main-menu. Lad feltet være tomt for kun at vise menuen på mobil.

CSS-vælger til din mobilmenu

Det element, der indeholder din mobilmenu, f.eks. #AccessibleNav eller .menu-drawer. Lad feltet være tomt for at beholde dit temas mobilmenu (kun computer).

• Flere elementer – adskil vælgerne med kommaer, f.eks. .header__inline-menu, .sticky-header nav. Menuen placeres i hvert match.
• Ét element til begge layouts – angiv den samme vælger i begge felter. Appen skifter mellem computer- og mobillayout efter skærmstørrelsen.
• Vælg containeren, ikke et enkelt link – match det element, der omslutter hele menuen (som regel en <nav> eller <ul>), ellers havner menuen inde i ét punkt.
• Foretræk stabile vælgere – id’er eller temaklasser som .header__inline-menu. Genererede vælgere som body > div:nth-child(3) > … holder op med at virke, når temaet ændres.

Find en CSS-vælger

Du kan også klikke på Hvordan finder du CSS-vælgeren til din menu? under felterne.

1. Undersøg menuen

   Åbn din butik i Chrome, højreklik på menuen, og vælg Inspicer.

2. Find menuens container

   Hold markøren over taggene i panelet Elementer. Find den nærmeste <nav> eller <ul>, hvis markering dækker hele menuen.

3. Kopiér vælgeren

   Brug # plus dens id (#SiteNav) eller . plus en tydelig klasse (.header__inline-menu). Ellers kan du højreklikke på tagget, vælge Kopiér > Kopiér vælger og indsætte den i appen.

4. Gentag for mobil

   Klik på enhedsikonet i DevTools, vælg en telefon, og åbn mobilmenuen (hamburgerikonet). Gentag for at få mobilvælgeren.

Tip

Test en vælger, før du gemmer den: kør document.querySelectorAll('your-selector') i DevTools-panelet Konsol. En tom liste betyder, at vælgeren er forkert.

Skal menuen stå et sted, hvor dit tema slet ingen menu har? Se Tilføj en brugerdefineret menuposition.

Relaterede sider

• Tilføj en brugerdefineret menupositionVis menuen præcis der, hvor du vil have den, ved at tilføje din egen container i temakoden.
• Kan jeg bruge forskellige menuer på computer og mobil?Vis én menu på computer og en anden på mobil, eller skjul nogle punkter pr. enhed.
• Hvorfor vises min menu ikke i min butik?En trin-for-trin-tjekliste, når menuen mangler i din webshop eller ser forkert ud.

Var dette nyttigt?

Rapportér et problem