Exibir o menu em um seletor CSS

Guia prático Todos os planos 3 min de leitura

O app posiciona o seu menu dentro de cada elemento correspondente, substituindo o conteúdo dele. Use em temas personalizados ou muito editados em que Substituir automaticamente e Substituir menu existente não funcionam, para um local específico ou para menus somente de desktop ou somente de celular.

Nota

O app recomenda esta opção para desenvolvedores ou quando as outras opções não funcionam. Não se sente à vontade com seletores CSS? Fale conosco e instalamos o menu para você gratuitamente.

Configurar os seletores CSS

1. Selecione Exibir o menu neste seletor CSS

   No editor de menu, clique na aba Configurações na barra à esquerda. Em Posição, escolha Exibir o menu neste seletor CSS.

   

   Exibir o menu neste seletor CSS com os dois campos de seletor

2. Informe os seletores

   Preencha os dois campos descritos em Configurações. Os #SiteNav e #AccessibleNav em cinza são exemplos de preenchimento, não valores salvos.

3. Salve e publique

   Clique em Salvar e depois publique o menu. Confira sua vitrine no desktop e no celular.

Configurações

Seletor CSS do seu menu principal

O elemento que contém o seu menu de desktop, por exemplo #SiteNav, .header__inline-menu ou nav.main-menu. Deixe vazio para exibir o menu somente no celular.

Seletor CSS do seu menu para celular

O elemento que contém o seu menu para celular, por exemplo #AccessibleNav ou .menu-drawer. Deixe vazio para manter o menu para celular do seu tema (somente desktop).

• Vários elementos — separe os seletores com vírgulas, por exemplo .header__inline-menu, .sticky-header nav. O menu entra em todos os elementos correspondentes.
• Um elemento para os dois layouts — informe o mesmo seletor nos dois campos. O app alterna entre o layout de desktop e o de celular conforme o tamanho da tela.
• Escolha o contêiner, não um link isolado — selecione o elemento que envolve o menu inteiro (geralmente um <nav> ou <ul>); caso contrário, o menu acaba dentro de um único item.
• Prefira seletores estáveis — IDs ou classes do tema como .header__inline-menu. Seletores gerados como body > div:nth-child(3) > … quebram quando o tema muda.

Encontrar um seletor CSS

Você também pode clicar em Como encontrar o seletor CSS do seu menu? abaixo dos campos.

1. Inspecione o menu

   Abra sua loja no Chrome, clique com o botão direito no menu e escolha Inspect.

2. Encontre o contêiner do menu

   No painel Elementos, passe o mouse sobre as tags. Encontre o <nav> ou <ul> mais próximo cujo destaque cubra o menu inteiro.

3. Copie o seletor

   Use # mais o id dele (#SiteNav) ou . mais uma classe clara (.header__inline-menu). Caso contrário, clique com o botão direito na tag, escolha Copy > Copy selector e cole no app.

4. Repita para o celular

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

Dica

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

Quer o menu em um lugar onde o seu tema não tem menu algum? Veja Adicionar uma posição personalizada para o menu.

Páginas relacionadas

• Adicionar uma posição personalizada para o menuExiba o menu exatamente onde você quiser adicionando seu próprio contêiner ao código do tema.
• Posso usar menus diferentes no desktop e no celular?Exiba um menu no desktop e outro no celular, ou oculte alguns itens por dispositivo.
• Por que meu menu não aparece na loja?Uma lista de verificação passo a passo para quando o menu não aparece na sua vitrine ou fica com aparência errada.

Esta página foi útil?

Relatar um problema