Zobrazení menu na CSS selektoru

Návod Všechny tarify 2 min čtení

Aplikace vloží vaše menu dovnitř každého odpovídajícího prvku a nahradí jeho obsah. Použijte tuto možnost u vlastních nebo silně upravených šablon, kde Automaticky nahradit ani Nahradit stávající menu nefungují, pro konkrétní místo nebo pro menu jen na počítači či jen na mobilu.

Poznámka

Aplikace tuto možnost doporučuje vývojářům, případně když ostatní možnosti nefungují. S CSS selektory si nevíte rady? Kontaktujte nás a menu vám zdarma nainstalujeme.

Nastavte CSS selektory

1. Zvolte Zobrazit menu na tomto CSS selektoru

   V editoru menu klikněte v levé liště na záložku Nastavení. Pod Pozice vyberte Zobrazit menu na tomto CSS selektoru.

   

   Zobrazit menu na tomto CSS selektoru se dvěma poli pro selektory

2. Zadejte selektory

   Vyplňte dvě pole popsaná v části Nastavení. Šedé #SiteNav a #AccessibleNav jsou jen zástupné texty, ne uložené hodnoty.

3. Uložte a publikujte

   Klikněte na Uložit a pak publikujte menu. Zkontrolujte obchod na počítači i na mobilu.

Nastavení

CSS selektor hlavního menu

Prvek, který obsahuje vaše menu pro počítač, například #SiteNav, .header__inline-menu nebo nav.main-menu. Pokud pole necháte prázdné, menu se zobrazí jen na mobilu.

CSS selektor mobilního menu

Prvek, který obsahuje vaše mobilní menu, například #AccessibleNav nebo .menu-drawer. Pokud pole necháte prázdné, zůstane mobilní menu šablony (menu jen na počítači).

• Více prvků — oddělte selektory čárkami, například .header__inline-menu, .sticky-header nav. Menu se vloží do každé shody.
• Jeden prvek pro obě rozvržení — zadejte do obou polí stejný selektor. Aplikace ho podle velikosti obrazovky přepíná mezi rozvržením pro počítač a pro mobil.
• Vyberte kontejner, ne jednotlivý odkaz — zacilte na prvek, který obaluje celé menu (obvykle <nav> nebo <ul>), jinak menu skončí uvnitř jedné položky.
• Upřednostněte stabilní selektory — ID nebo třídy šablony jako .header__inline-menu. Generované selektory jako body > div:nth-child(3) > … se při změně šablony rozbijí.

Jak najít CSS selektor

Pod poli můžete také kliknout na Jak najít CSS selektor vašeho menu?.

1. Prozkoumejte menu

   Otevřete obchod v Chromu, klikněte pravým tlačítkem na menu a zvolte Prozkoumat.

2. Najděte kontejner menu

   Na panelu Elements (Prvky) najíždějte myší na značky. Najděte nejbližší <nav> nebo <ul>, jehož zvýraznění pokrývá celé menu.

3. Zkopírujte selektor

   Použijte # a jeho id (#SiteNav) nebo . a jasnou třídu (.header__inline-menu). Jinak klikněte na značku pravým tlačítkem, zvolte Copy > Copy selector (Kopírovat > Kopírovat selektor) a vložte ho do aplikace.

4. Zopakujte to pro mobil

   V nástrojích pro vývojáře klikněte na ikonu zařízení, zvolte telefon a otevřete mobilní menu (ikona hamburgeru). Zopakováním postupu získáte selektor pro mobil.

Tip

Selektor před uložením otestujte: v panelu Console (Konzole) nástrojů pro vývojáře spusťte document.querySelectorAll('your-selector'). Prázdný seznam znamená, že selektor je špatně.

Chcete menu tam, kde vaše šablona žádné menu nemá? Viz Vlastní pozice menu.

Související stránky

• Vlastní pozice menuZobrazte menu přesně tam, kde ho chcete, přidáním vlastního kontejneru do kódu šablony.
• Můžu mít jiné menu na počítači a na mobilu?Zobrazte jedno menu na počítači a jiné na mobilu, nebo skryjte některé položky na určitém zařízení.
• Proč se moje menu v obchodě nezobrazuje?Kontrolní seznam krok za krokem pro případ, že menu ve vašem obchodě chybí nebo vypadá špatně.

Pomohla vám tato stránka?

Nahlásit problém