Mostrar o menu num seletor CSS

Guia prático Todos os planos 3 min de leitura

A aplicação coloca o menu dentro de cada elemento correspondente, substituindo o seu conteúdo. Use esta opção em temas personalizados ou muito alterados, onde Automatically replace e Replace existing menu não funcionam, para um local específico ou para menus só para computador ou só para telemóvel.

Nota

A aplicação recomenda esta opção para programadores ou quando as outras opções não funcionam. Não se sente à vontade com seletores CSS? Contacte-nos e instalamos o menu gratuitamente por si.

Configurar os seletores CSS

1. Selecione Show menu on this CSS selector

   No editor de menu, clique no separador Settings (definições) na barra à esquerda. Em Position (posição), escolha Show menu on this CSS selector (mostrar o menu neste seletor CSS).

   

   Show menu on this CSS selector com os seus dois campos de seletor

2. Introduza os seletores

   Preencha os dois campos descritos em Definições. Os valores a cinzento #SiteNav e #AccessibleNav são apenas exemplos, não valores guardados.

3. Guarde e publique

   Clique em Save e, depois, publique o menu. Verifique a loja online no computador e no telemóvel.

Definições

CSS selector of your main menu (seletor CSS do menu principal)

O elemento que contém o menu para computador, por exemplo #SiteNav, .header__inline-menu ou nav.main-menu. Deixe-o vazio para mostrar o menu apenas no telemóvel.

CSS selector of your mobile menu (seletor CSS do menu para telemóvel)

O elemento que contém o menu para telemóvel, por exemplo #AccessibleNav ou .menu-drawer. Deixe-o vazio para manter o menu para telemóvel do tema (apenas computador).

• Vários elementos: separe os seletores com vírgulas, por exemplo .header__inline-menu, .sticky-header nav. O menu é colocado em cada correspondência.
• Um elemento para os dois esquemas: introduza o mesmo seletor nos dois campos. A aplicação alterna entre o esquema para computador e para telemóvel consoante o tamanho do ecrã.
• Escolha o contentor, não uma única ligação: indique o elemento que envolve todo o menu (normalmente um <nav> ou <ul>); caso contrário, o menu fica dentro de um só item.
• Prefira seletores estáveis: IDs ou classes do tema, como .header__inline-menu. Seletores gerados, como body > div:nth-child(3) > …, deixam de funcionar quando o tema muda.

Encontrar um seletor CSS

Também pode clicar em How to find CSS selector of your menu? (como encontrar o seletor CSS do menu?) por baixo dos campos.

1. Inspecione o menu

   Abra a loja no Chrome, clique com o botão direito do rato no menu e escolha Inspecionar.

2. Encontre o contentor do menu

   No painel Elements, passe o rato pelas etiquetas HTML. Encontre o <nav> ou <ul> mais próximo cujo realce cobre todo o menu.

3. Copie o seletor

   Use # seguido do id (#SiteNav) ou . seguido de uma classe clara (.header__inline-menu). Caso contrário, clique com o botão direito do rato na etiqueta, escolha Copy > Copy selector e cole-o na aplicação.

4. Repita para o telemóvel

   Clique no ícone de dispositivo nas DevTools, escolha um telemóvel e abra o menu para telemóvel (ícone de hambúrguer). Repita para obter o seletor para telemóvel.

Dica

Teste um seletor antes de o guardar: na Console das DevTools, execute document.querySelectorAll('your-selector'). Uma lista vazia significa que o seletor está errado.

Quer o menu num local onde o tema não tem menu? Consulte Adicionar uma posição personalizada.

Páginas relacionadas

• Adicionar uma posição personalizada para o menuMostre o menu exatamente onde quer adicionando o seu próprio contentor ao código do tema.
• Posso usar menus diferentes no computador e no telemóvel?Mostre um menu no computador e outro no telemóvel, ou oculte alguns itens por dispositivo.
• Porque é que o menu não aparece na minha loja?Uma lista de verificação passo a passo para quando o menu não aparece na loja online ou tem um aspeto errado.

Esta página foi útil?

Comunicar um problema