Menu weergeven op een CSS-selector

Stappenplan Alle abonnementen 3 min. leestijd

De app plaatst je menu in elk element dat overeenkomt en vervangt de inhoud ervan. Gebruik deze optie in aangepaste of sterk bewerkte thema’s waarin Automatisch vervangen en Bestaand menu vervangen niet werken, voor een specifieke plek, of voor menu’s die alleen op desktop of alleen op mobiel verschijnen.

Opmerking

De app raadt deze optie aan voor ontwikkelaars, of als de andere opties niet werken. Voel je je niet thuis bij CSS-selectors? Neem contact met ons op, dan installeren we het menu gratis voor je.

De CSS-selectors instellen

1. Menu weergeven op deze CSS-selector selecteren

   Klik in de menu-editor op het tabblad Instellingen in de linkerbalk. Kies onder Positie de optie Menu weergeven op deze CSS-selector.

   

   Menu weergeven op deze CSS-selector met de twee selectorvelden

2. De selectors invullen

   Vul de twee velden in die onder Instellingen worden beschreven. De grijze #SiteNav en #AccessibleNav zijn voorbeeldwaarden, geen opgeslagen waarden.

3. Opslaan en publiceren

   Klik op Opslaan en publiceer daarna het menu. Controleer je webwinkel op desktop en op mobiel.

Instellingen

CSS-selector van je hoofdmenu

Het element dat je desktopmenu bevat, bijvoorbeeld #SiteNav, .header__inline-menu of nav.main-menu. Laat het leeg om het menu alleen op mobiel te tonen.

CSS-selector van je mobiele menu

Het element dat je mobiele menu bevat, bijvoorbeeld #AccessibleNav of .menu-drawer. Laat het leeg om het mobiele menu van je thema te behouden (alleen desktop).

• Meerdere elementen: scheid selectors met komma’s, bijvoorbeeld .header__inline-menu, .sticky-header nav. Het menu komt in elk element dat overeenkomt.
• Eén element voor beide weergaven: vul in beide velden dezelfde selector in. De app wisselt op basis van de schermgrootte tussen de desktop- en de mobiele weergave.
• Kies de container, niet één link: kies het element dat het hele menu omvat (meestal een <nav> of <ul>), anders komt het menu in één item terecht.
• Gebruik bij voorkeur stabiele selectors: ID’s of themaklassen zoals .header__inline-menu. Gegenereerde selectors zoals body > div:nth-child(3) > … werken niet meer als het thema verandert.

Een CSS-selector vinden

Je kunt ook onder de velden op Hoe vind je de CSS-selector van je menu? klikken.

1. Het menu inspecteren

   Open je winkel in Chrome, klik met de rechtermuisknop op het menu en kies Inspecteren.

2. De menucontainer vinden

   Ga in het paneel Elementen met de muis over de tags. Zoek de dichtstbijzijnde <nav> of <ul> waarvan de markering het hele menu bedekt.

3. De selector kopiëren

   Gebruik # plus de id (#SiteNav) of . plus een duidelijke klasse (.header__inline-menu). Lukt dat niet, klik dan met de rechtermuisknop op de tag, kies Kopiëren > Selector kopiëren en plak hem in de app.

4. Herhalen voor mobiel

   Klik in DevTools op het apparaatpictogram, kies een telefoon en open het mobiele menu (hamburgerpictogram). Herhaal de stappen om de selector voor mobiel te krijgen.

Tip

Test een selector voordat je hem opslaat: voer in de Console van DevTools document.querySelectorAll('your-selector') uit. Een lege lijst betekent dat de selector niet klopt.

Wil je het menu op een plek waar je thema helemaal geen menu heeft? Zie Een aangepaste menupositie toevoegen.

Gerelateerde pagina's

• Een aangepaste menupositie toevoegenToon het menu precies waar je wilt door je eigen container aan de themacode toe te voegen.
• Kan ik verschillende menu's voor desktop en mobiel gebruiken?Toon het ene menu op desktop en een ander op mobiel, of verberg sommige items per apparaat.
• Waarom verschijnt mijn menu niet in mijn winkel?Een checklist, stap voor stap, als het menu ontbreekt in je webwinkel of er verkeerd uitziet.

Was dit nuttig?

Probleem melden