Você abre sua loja da Shopify no celular, toca no ícone de três linhas (hambúrguer) para conferir uma coleção e nada acontece. Ou talvez o painel lateral abra rapidamente e feche no mesmo instante, ou os links principais apareçam mas os submenus se recusem a abrir. Se os clientes não conseguem abrir o menu de navegação no celular, explorar sua loja fica muito mais difícil.
- Três Causas Bem Definidas: "O menu não abre" pode significar um painel ocultado por CSS ou por marcação de tema danificada, uma regra de hover em conflito com telas de toque, ou submenus não aninhados no painel de controle.
- Segurança em Primeiro Lugar: Sempre duplique o tema antes de tocar no código e teste a navegação em um aparelho móvel de verdade em vez de confiar apenas na janela reduzida do computador.
- Custos de Manutenção: Alterações de CSS inseridas manualmente nos arquivos do tema costumam ser sobrescritas em atualizações, tornando aplicativos dedicados uma solução para evitar retrabalho contínuo.
Quick answer: why a Shopify mobile menu won’t open
Most Shopify mobile menus fail for one of three reasons: the drawer is hidden by CSS or broken theme markup, a hover-only dropdown fights with touch, or submenu links are not nested in Content > Menus. Duplicate your theme, check each cause in that order, and test on a real phone.
Este guia foi elaborado especificamente para temas da Shopify; os menus do WordPress ou Wix funcionam de forma diferente. Analise as causas descritas a seguir rigorosamente na ordem apresentada em uma cópia duplicada do seu tema, garantindo a integridade da sua loja ativa durante as verificaciones.
Three different problems: menu won’t open, opens the wrong way, submenu won’t expand
Quando lojistas afirmam que o menu mobile não funciona, estão descrevendo um de cinco sintomas comuns. Antes de alterar ajustes ou editar código, veja em qual linha sua loja se enquadra:
| Sintoma | Causa provável | Onde intervir |
|---|---|---|
| O ícone de hambúrguer não responde | Painel ocultado por CSS ou marcação do tema danificada | Verificar painel oculto e marcação do tema |
| Abre e fecha em seguida / pisca ao tocar | Menu acionado por hover colidindo com tela de toque | Mudar para abertura ao tocar |
| Os itens do submenu não aparecem | Itens não aninhados em Conteúdo > Menus ou tema retraído | Verificar aninhamento e opções do tema |
| O painel lateral ocupa a tela inteira | Estilo ou configuração de largura do drawer no tema | Ajustar largura e estilo do painel |
| Funciona no computador mas não no celular | Cabeçalho mobile configurado de forma independente | Verificar configurações do cabeçalho mobile e estilo do drawer |
Cada sintoma atua sobre uma camada técnica diferente da vitrine. Um ícone inerte pode indicar um script interrompido ou um painel lateral escondido por regras CSS. Por outro lado, submenus que piscam podem decorrer de regras pensadas para mouse que reagem de forma estranha ao toque. Lembre-se de que os cabeçalhos para dispositivos móveis e desktops podem ser configurados separadamente em alguns temas.
Before you edit code: duplicate your theme and test on a real phone
Antes de alterar qualquer arquivo de tema ou folha de estilo, resguarde sua loja ativa por meio de dois cuidados indispensáveis.
Em primeiro lugar, gere uma cópia de segurança do seu tema atual. Conforme detalhado no manual de duplicação de temas da Shopify: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes and start again if you need to.” No painel da Shopify, acesse Loja virtual > Temas, clique nos três pontos (...) ao lado do tema em uso e selecione Duplicar. Execute todos os diagnósticos e testes de código nessa cópia.
Em segundo lugar, teste a navegação em um aparelho móvel físico. O modo responsivo das ferramentas de desenvolvedor no computador é útil, mas não equivale a um celular de verdade. A Shopify recomenda expressamente testar menus em dispositivos móveis para confirmar que os menus suspensos se expandem conforme o esperado. Um dispositivo real pode mostrar problemas de toque que os emuladores de desktop talvez deixem passar.
Registre também quaisquer aplicativos ou códigos adicionados nos últimos dias. Scripts de marketing, Google Tag Manager, ferramentas de SEO e construtores de páginas podem adicionar scripts que talvez interfiram na navegação. Verifique primeiro o editor de temas, pois o comportamento do menu móvel é controlado no editor de temas na seção Cabeçalho em muitos temas.
Hamburger icon does nothing: hidden drawer CSS and broken theme.liquid
Quando o toque no botão de hambúrguer não surte nenhum efeito, a loja geralmente sofre com um erro de JavaScript que bloqueia a rotina de abertura, ou com uma instrução CSS que mantém o painel invisível.
Check the browser console and recent apps
Inicie a apuração pelo console de scripts do navegador. Conecte o celular ao computador via depuração USB ou abra a loja em um navegador desktop ajustado para proporções móveis e abra as ferramentas de desenvolvedor (F12 ou botão direito > Inspecionar).
Acesse a aba Console e toque no botão de hambúrguer. Procure por mensagens de erro em vermelho, como Uncaught TypeError ou SyntaxError. Um erro não tratado de script pode interromper o restante desse script, o que pode impedir que o tema dispare o evento de navegação. Caso a falha aponte para um aplicativo externo instalado recentemente, desative provisoriamente o bloco correspondente em Loja virtual > Temas > Personalizar > Extensões de app para verificar se o botão volta a responder.
Restore the top lines of theme.liquid
Se o console registrar problemas generalizados em toda a página, inspecione o arquivo de layout estrutural do tema. O arquivo layout/theme.liquid contém a estrutura HTML de nível superior da página, na qual os scripts do tema se apoiam.
Em um caso relatado na comunidade da Shopify, o menu mobile de uma loja parou de funcionar depois que as duas primeiras linhas de theme.liquid foram removidas enquanto alguém adicionava uma tag do Google Tag Manager. É uma causa provável apontada por um lojista, não uma correção confirmada oficialmente, mas mostra por que vale conferir se faltam linhas no topo do arquivo. Abra Loja virtual > Temas > … > Editar código, acesse layout/theme.liquid e compare as primeiras linhas com uma cópia intacta do mesmo tema para identificar o que foi removido.
A CSS rule that forces the drawer visible (last resort)
Em certas ocasiões, o JavaScript do tema altera os estados normalmente, mas regras CSS conservam o painel fora da tela ou oculto.
Por exemplo, em um tópico da comunidade da Shopify referente ao tema Dawn, um usuário solucionou a falha de visualização adicionando uma media query ao arquivo base.css:
/* Example reported in a Shopify Community thread for Dawn theme base.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
.menu-opening .menu-drawer {
transform: translate(0);
visibility: visible;
}
}
Em outra situação em um tema diferente, um lojista confirmou que o menu voltou a abrir após acrescentar visibility: visible à declaração no arquivo main.css (tópico 389597 da comunidade da Shopify):
/* Example reported in a Shopify Community thread for main.css */
/* Always test on a duplicate theme: selectors vary by theme and version. */
.main-menu__disclosure.is-open > .main-menu__content {
opacity: 1;
visibility: visible;
}
De maneira similar, outro lojista achou útil um seletor direcionado a tags details abertas, como .js details[open] > .menu-drawer (tópico 395768 da comunidade da Shopify).
Considere estes trechos CSS unicamente como exemplos documentados em versões e temas específicos, jamais como conserto geral. Os seletores diferem muito entre as estruturas de cada tema. Além disso, forçar visibilidade por CSS apenas camufla sintomas se a raiz do problema for um código quebrado. Memorize três indicadores para a análise: visibility hidden, broken theme.liquid, e check the browser console.
Figure 1: Concept illustration — Diagram of a Shopify mobile drawer hidden by CSS next to the same drawer made visible after checking markup and styles.
Hover dropdowns on touch screens: open on tap instead
Caso o menu no celular abra rapidamente e recolha em seguida, ou se os submenus piscarem ao toque, uma causa frequente é uma regra de hover pensada para o desktop.
Conforme a documentação da MDN Web Docs, a consulta @media (hover: none) define situações onde “the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap)” (documentação da MDN sobre hover). Em contrapartida, @media (hover: hover) é válida quando “the primary input mechanism can conveniently hover over elements.”
Quando estilos customizados ou do tema para desktop vinculam a exibição do submenu ao estado :hover sem considerar os recursos do dispositivo, as telas de toque podem tentar emular o mouse. Como resultado, um menu suspenso pode abrir e fechar de imediato ao toque, ou o toque pode não se comportar como a regra de hover espera.
Para corrigir esse conflito, mude para abertura ao toque mantendo as regras de hover restritas aos dispositivos com ponteiro genuíno:
/* Restrict hover behavior to devices with true pointer hover capability */
/* Placeholder selectors for illustration only: replace them with your theme's own classes. */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (hover: hover) {
.header__menu-item:hover .header__submenu {
display: block;
}
}
Ao encapsular o hover sob @media (hover: hover), celulares e tablets voltam à abertura ao toque nativa do tema. Abrir um submenu por hover é complicado em cabeçalhos de toque: em um tópico na comunidade da Shopify sobre o Dawn, um colaborador escreveu que não via como fazer isso só com CSS; provavelmente é preciso JavaScript ou manter o comportamento padrão do tema.
Submenus that should expand: nesting, theme settings, and CSS
Quando os links de primeiro nível aparecem no painel mobile mas os itens secundários não abrem, o obstáculo geralmente é de configuração e não de código.
Comece checando a disposição no painel da Shopify em Conteúdo > Menus. Segundo as orientações da documentação de menus suspensos da Shopify: “You can build drop-down menus by creating or moving menu items so that they’re nested below a top-level item.” Cada item secundário precisa estar aninhado abaixo do item pai no editor de menus; um item que não esteja aninhado continua sendo um item principal.
A Shopify estabelece um teto claro para a profundidade: “The top-level item can have up to two levels of nested drop-down menus.” Isso possibilita três níveis no total:
- Item de primeiro nível (ex.: Roupas)
- Primeiro nível de submenu aninhado (ex.: Feminino)
- Segundo nível de submenu aninhado (ex.: Casacos)
Nos celulares, muitos temas exibem itens pai que contêm subitens como botões de abertura e não como links diretos de página. Tocar no item pai expande a lista sem mudar de endereço. Se você precisa que os clientes visitem a página da coleção pai, adicione um item específico (como “Ver tudo”) no topo da lista filha.
Se a estrutura no painel estiver correta mas o submenu insistir em não expandir no celular, o tema pode demandar ajustes de estilo. A Shopify ressalta que “some themes might require CSS adjustments to improve mobile usability.” Ao redigir regras CSS, restrinja-as rigorosamente a media queries móveis (como @media (max-width: 749px)) e direcione-as unicamente às classes do painel para não desconfigurar a versão desktop. Para dominar a arquitetura de links, confira nosso Shopify menu guide completo.
Drawer opens full width or the wrong style
Por vezes o menu abre no celular, mas de um jeito que compromete a usabilidade. Alguns lojistas percebem que o painel lateral cobre a tela inteira do aparelho e esconde a loja ao fundo.
Em conversas entre lojistas, alguns dizem preferir um drawer que não tome toda a tela (tópico 275308 da comunidade da Shopify). Um menu deslizante que cobre o display de ponta a ponta esconde a página ao fundo; uma faixa escurecida ainda visível pode deixar mais claro que o painel pode ser fechado.
Antes de alterar o código, verifique as configurações do tema. Nos temas modernos, o comportamento do menu móvel é ajustado no editor de temas na seção Cabeçalho. Além disso, alguns temas possibilitam configurar o cabeçalho separadamente para mobile e desktop.
Se o tema atual não dispuser de controle de largura para o drawer mobile, você pode testar a aplicação de uma largura máxima (max-width) no seu tema duplicado:
/* Example max-width constraint for a slide-out drawer on a duplicate theme; the value is only a placeholder, pick one that suits your design */
/* Always test on a duplicate theme: selectors vary by theme and version. */
@media (max-width: 749px) {
.menu-drawer {
max-width: 80vw;
}
}
Ao estilizar o painel, preserve três aspectos funcionais: garantir que a ocorrência Drawer opens full width seja controlada, que o fundo atenuado overlay stays visible continue perceptível para permitir fechar com um toque fora, e que um easy close button permaneça visível no topo. Para conhecer padrões de design de painéis laterais, veja nosso guia sobre mobile drawer menu best practices.
Figure 2: Concept illustration — Side-by-side phone mockups of a full-width Shopify mobile drawer and a partial-width drawer with the page visible behind.
Trade-offs: when code fixes stop being worth it
Intervir manualmente em arquivos CSS e Liquid para corrigir o menu mobile pode resolver urgências imediatas, mas impõe custos de manutenção contínuos.
Primeiramente, o código personalizado muitas vezes precisa ser reaplicado após uma atualização. Em uma discussão sobre o tema Dawn, um comerciante contou que a atualização para a versão 11.0 resolveu o problema do menu, mas que ele precisaria adicionar de volta suas alterações personalizadas (tópico 259424 da comunidade da Shopify). Depois de atualizar o tema, o que você adicionou em arquivos como base.css, main.css ou theme.liquid pode precisar ser aplicado novamente.
Em segundo lugar, códigos obtidos em fóruns dependem muito do tema. O seletor do exemplo de main.css (.main-menu__disclosure.is-open > .main-menu__content) não tem relação com o do exemplo de base.css do Dawn (.menu-opening .menu-drawer). Colar CSS feito para um tema em outro pode não fazer nada ou causar falhas visuais inesperadas. Acumular vários remendos também dificulta o diagnóstico.
Contudo, adotar um aplicativo nem sempre é o caminho mais recomendável. Existem casos em que você NÃO deve migrar para um app:
- Falta apenas uma linha de marcação: Se o menu parou porque as primeiras linhas de
theme.liquidforam removidas ao adicionar uma tag ou um app, repor essas linhas pode corrigir tudo com simplicidade. - O tema já tem o ajuste: Se o tema oferece controles nativos no Cabeçalho para gerenciar a largura do drawer ou o estilo dos submenus, usar essas opções nativas costuma ser o caminho mais simples.
- Sobrecarga de configuração: Qualquer aplicativo novo representa mais um recurso para configurar e administrar na loja.
Where Navi+ fits
Caso a navegação mobile nativa do seu tema careça dos recursos de layout desejados, ou caso você prefira não ter que reinserir código CSS após cada atualização, o Navi+ traz uma alternativa modular.
O Navi+ Mobile Menu oferece um painel lateral de navegação configurado integralmente pela interface do aplicativo:
- Largura customizada do drawer: Defina a largura do menu lateral mobile nas configurações do app (novos menus começam com uma predefinição de 80%) para que ele não precise tomar a tela de margem a margem.
- Variedade de estilos para submenus: Escolha se os níveis secundários deslizam horizontalmente para um novo painel ou se abrem verticalmente no mesmo lugar, em sanfona.
- Fundo atenuado e travamento de rolagem: Você pode definir um fundo sombreado e o bloqueio de rolagem da página enquanto o menu está aberto, e os menus suportam até 3 níveis de navegação.
- Barra inferior Tab Bar fixa: Combine o menu hambúrguer com uma barra de navegação no rodapé da tela que permanece visível enquanto os clientes navegam.
É fundamental esclarecer os limites do Navi+: o aplicativo não conserta arquivos de tema corrompidos e não repara o menu com defeito do próprio tema. Em vez disso, ele atua como um sistema de navegação independente que substitui o menu do tema quando você opta por não editar código.
If you’ve re-applied the same menu fix after every theme update, you can try building the mobile drawer in Navi+ instead — set the drawer width and submenu style in the app, preview it on your phone, and keep your theme files untouched.
Para planejar a estrutura ideal de navegação para a sua loja, consulte nossas recomendações sobre como choose the right menu type e como adotar uma bottom tab bar on mobile.
Action checklist after the fix
Após concluir as alterações no tema duplicado, avalie estes 7 critérios antes de publicar a versão em definitivo:
- Abertura e fechamento bidirecionais: Assegure que o painel abra de imediato ao tocar no hambúrguer e feche tanto pelo botão de fechar (
X) quanto pelo toque no fundo escurecido. - Expansão uniforme de submenus: Toque em cada item pai para garantir que as listas filhas abram suavemente, sem solavancos visuais ou redirecionamentos indevidos.
- Conformidade de área de toque: Verifique se os links e botões de fechar atendem ao critério WCAG 2.2 SC 2.5.8 com dimensão mínima de 24 x 24 pixels CSS, com algumas exceções (parâmetros W3C de dimensionamento).
- Testes em múltiplos dispositivos: Avalie o tema tanto em um aparelho iOS (Safari) quanto em um Android (Chrome) para captar comportamentos característicos de cada sistema.
- Registro de alterações manuais: Mantenha um registro das regras CSS ou alterações em Liquid realizadas, facilitando futuras consultas em novas atualizações.
- Avaliação de opções de navegação visível: Lembre-se de que, conforme destacado pela pesquisa do Nielsen Norman Group: “the hamburger menu is not so universal that everyone knows it or immediately looks for it” (pesquisa NN/g sobre navegação mobile). Avalie complementos por meio de navigation beyond the hamburger menu.
- Publicar apenas o tema aprovado: Ative o tema duplicado na sua loja ativa somente depois que todos os itens acima forem aprovados.
FAQ
Why won’t my Shopify hamburger menu open?
Geralmente o elemento do drawer fica oculto por alguma instrução CSS conflitante ou as linhas de abertura em theme.liquid foram removidas ao adicionar uma tag ou um script. Consulte o console do navegador para identificar erros de JavaScript e desative aplicativos recentes antes de modificar código.
How do I make a submenu open when I tap the parent item?
No painel da Shopify em Conteúdo > Menus, arraste e recue os itens filhos diretamente abaixo do item pai correspondente. Muitos temas transformam o item pai em botão de expansão; outros comportamentos demandam configurações do tema ou CSS.
How many submenu levels does Shopify support?
A navegação da Shopify permite um item de primeiro nível com até dois níveis de menus suspensos aninhados abaixo, perfazendo três níveis hierárquicos ao todo. O tema ativo da sua vitrine também pode precisar ter suporte para renderizar os três níveis.
Will my CSS fix disappear when I update my theme?
Muitas vezes, sim. Modificações feitas diretamente em arquivos como base.css ou main.css costumam precisar ser reaplicadas após atualizar para uma nova versão do tema. Sempre duplique o tema antes de editar e anote as customizações efetuadas.
Why do hover menus misbehave on phones?
Muitas telas de toque não permitem hover com conforto; o MDN observa que muitos dispositivos móveis só emulam o hover com um toque longo incômodo. Quando uma regra :hover de desktop dispara ao toque, um menu suspenso pode abrir e fechar de forma inesperada.
Can I change the width of the mobile drawer?
Dependendo do tema, você costuma poder ajustar a largura do menu lateral mobile diretamente no editor de temas na seção Cabeçalho. Se essa opção não estiver disponível, é possível aplicar uma regra max-width via CSS ou usar um aplicativo de menu que traga esse recurso.
Sources
- Shopify Help Center: Drop-down menus (help.shopify.com)
- Shopify Help Center: Duplicating themes (help.shopify.com)
- MDN Web Docs: @media (hover) (developer.mozilla.org)
- W3C: WCAG 2.2 Target Size (Minimum) (w3.org)
- Nielsen Norman Group: Mobile Navigation Beyond the Hamburger (nngroup.com)
- fudge.ai: How to Change Mobile Menu Behavior in Shopify (fudge.ai)
- Shopify Community: Why isn’t my online store menu opening on mobile devices? (community.shopify.com)
- Shopify Community: Why is my menu not showing on mobile when I click the hamburger icon? (community.shopify.com)
- Shopify Community: Mobile menu is not working for my store (community.shopify.com)
- Shopify Community: Menu doesn’t work on mobile (community.shopify.com)
- Shopify Community: Why is the mobile menu not functioning on Dawn theme? (community.shopify.com)
- Shopify Community: How to fix a menu opening fully on mobile? (community.shopify.com)
- Shopify Community: Dawn theme header expand without clicking (community.shopify.com)
Explore os temas
Este guia traz links para artigos específicos — aprofunde-se em cada um.