Como ajustar o tamanho de um menu em um aplicativo de navegação: barra de abas, menu mobile e mega menu na Shopify

Quick Answer: How to Adjust Menu Size in a Navigation App

Abra as configurações de design do menu e altere cinco coisas separadamente: tamanho do texto, altura dos itens, largura do menu ou da gaveta, tamanho dos ícones e espaçamento das áreas de toque. Mantenha as áreas de toque com pelo menos 24 x 24 pixels CSS, verifique em um celular estreito e use CSS personalizado apenas quando não houver nenhuma configuração.

Para ajustar o tamanho do menu da sua loja sem escrever código, siga estas cinco etapas:

1. Selecione o tipo de menu: Abra o aplicativo de navegação e escolha o formato desejado (barra de abas inferior, menu gaveta mobile ou mega menu para desktop).
2. Defina a escala tipográfica: Ajuste o tamanho da fonte separadamente para categorias principais e subitens para garantir hierarquia visual clara.
3. Calibre a altura das linhas: Aumente o preenchimento ou defina uma altura mínima (min-height) para que os links sejam fáceis de tocar com o polegar.
4. Ajuste largura e ícones: Amplie a largura da gaveta ou do submenu para acomodar nomes extensos de coleções e dimensione os ícones proporcionalmente.
5. Teste em um smartphone estreito: Revise o menu em um celular real ou a 320 pixels CSS de largura para avaliar a legibilidade e o conforto de toque.

What “Menu Size” Actually Means: Five Dimensions

Quando um menu parece desproporcional no smartphone, os lojistas frequentemente procuram por um único seletor para aumentá-lo ou reduzi-lo. No web design, contudo, o “tamanho do menu” não é uma configuração única, mas a harmonia de cinco dimensões geométricas distintas.

Modificar uma dimensão sem equilibrar as demais compromete o layout. Por exemplo, ampliar a fonte sem alargar a gaveta faz com que títulos longos sejam truncados. Aumentar os ícones sem elevar a altura da barra comprime visualmente os botões.

Essas medidas são definidas em pixels CSS (px). O pixel CSS é uma unidade abstrata adotada pelos navegadores web. Em telas mobile de alta densidade, um pixel CSS corresponde a múltiplos pixels físicos do aparelho.

Se você também precisa ajustar paletas de cores, fontes, animações ao passar o mouse ou sombras, consulte nosso guia sobre como alterar cores e fontes do menu.

Why Theme Menus Often Look Too Small or Too Big on Mobile

Uma dúvida recorrente entre lojistas da Shopify diz respeito à separação dos locais de configuração da navegação.

No painel de administração tradicional da Shopify, os links e a estrutura de níveis são gerenciados em Loja virtual > Navegação. No entanto, a aparência gráfica, a tipografia e o layout responsivo do menu mobile são configurados exclusivamente no Editor de temas (fudge.ai).

Shopify Admin
 ├── Loja virtual > Navegação  --> Estrutura de links & URLs (Conteúdo)
 └── Loja virtual > Temas
      └── Editor de temas      --> Layout do cabeçalho & estilos visuais (Exibição)

Muitos temas da Shopify não têm uma configuração dedicada para o tamanho da gaveta mobile ou a altura das linhas, por isso as respostas nos fóruns da comunidade costumam ser trechos de CSS. As configurações disponíveis variam de tema para tema: verifique primeiro o editor do seu próprio tema.

Além disso, cabeçalhos para desktop comportam-se de forma distinta dos menus táteis. Quando links horizontais são compactados em um menu hambúrguer, tamanhos de fonte que pareciam equilibrados em um notebook tornam-se minúsculos ou excessivamente volumosos na tela de um celular. Entenda essas limitações em nossa análise sobre os limites dos menus de temas da Shopify.

Adjust Tab Bar Size: Icon, Label and Bar Height

Uma barra de abas inferior mantém as áreas prioritárias ao alcance direto do polegar. No entanto, se a barra for muito fina ou comprimida, tocar nos destinos torna-se uma tarefa desconfortável.

Figura 1: Ilustração conceitual (Concept illustration) — Adjust Tab Bar Size: Icon, Label and Bar Height

Em um app de navegação, você equilibra três configurações fundamentais:

1. Tamanho do ícone: O símbolo visual que representa cada seção (Início, Catálogo, Busca, Carrinho).
2. Tamanho do texto do rótulo: A legenda curta posicionada abaixo ou ao lado do ícone.
3. Altura da barra: A altura vertical total do conteneur fixado na parte inferior da tela.

Ao aumentar o tamanho dos ícones para facilitar o reconhecimento, você também deve aumentar a altura total da barra. Caso mantenha a altura inalterada, os ícones e rótulos ficarão espremidos contra as bordas.

Mantenha os rótulos de texto concisos: o ideal é uma única palavra como “Início”, “Busca” ou “Carrinho”. Textos extensos sofrem truncamento com reticências ou invadem abas vizinhas. Cada aba precisa de uma área de toque ampla e confortável. Para saber mais sobre ergonomia em dispositivos móveis, confira nosso guia sobre barras de abas e navegação ergonômica para o polegar.

Adjust Mobile Menu (Drawer) Size: Text, Row Spacing and Width

O menu gaveta lateral (Drawer) é o padrão predominante no comércio mobile. Como ele estrutura as coleções em uma lista vertical, o ajuste dimensional exige equilíbrio entre tamanho de fonte, espaçamento de linhas e largura do contêiner.

1. Tamanho de texto hierarquizado

Evite utilizar o mesmo tamanho de fonte para todos os níveis. Categorias principais (Nível 1) precisam de um texto maior para ancorar o olhar do visitante. Subcategorias (Níveis 2 e 3) devem possuir fontes proporcionalmente menores e recuo visual.

2. Espaçamento de linhas com Min Height e Padding

Quando os links ficam muito próximos verticalmente, ocorrem toques acidentais em itens adjacentes. No seu app, utilize os controles de Min Height (altura mínima da linha) ou Item Padding vertical. A altura mínima assegura espaço suficiente mesmo para nomes curtos.

3. Largura da gaveta (Drawer Width)

A largura da gaveta estabelece a extensão horizontal coberta pelo menu aberto. Se a gaveta for estreita demais, nomes de coleções com mais de duas palavras quebram em várias linhas de maneira desordenada.

Ao aumentar a fonte, alargue a gaveta para permitir que títulos longos caibam em uma única linha. Teste sempre o menu em telas estreitas de 320 pixels CSS (W3C Reflow). Para consultar arquiteturas de painéis laterais, confira nossas práticas recomendadas para menu gaveta mobile.

Adjust Mega Menu Size on Desktop and Mobile: Columns, Headings, Images

No computador, os mega menus organizam catálogos extensos em painéis suspensos divididos em colunas. Obter o tamanho adequado exige equilibrar a largura dos painéis, a distribuição das colunas e os elementos gráficos.

Submenus de coluna única vs painéis multicoluna

Os aplicativos separam listas simples de grandes painéis:

• Submenus de coluna única: Utilize a configuração Submenu Width para determinar a largura do painel (configuração de largura do submenu). Isso evita que o menu encolha em torno de palavras curtas ou se estique em excesso.
• Painéis multicoluna de expansão completa: Em mega menus complexos, ajuste a largura total para assegurar espaçamentos confortáveis entre as colunas.

Dimensões do Mega Menu
 ├── Largura de submenu (Dropdowns simples de 1 coluna)
 ├── Largura de expansão total (Layouts de múltiplas colunas)
 ├── Títulos de coluna (Hierarquia visual destacada sobre sublinks)
 └── Imagens de categorias (Largura contida para evitar desbordamento)

Hierarquia entre títulos de coluna e sublinks

Nos layouts multicoluna, os cabeçalhos funcionam como guias de navegação. Defina títulos de coluna consideravelmente maiores e mais encorpados do que os sublinks abaixo, facilitando a rápida leitura visual.

Controlar imagens promocionais

Muitos mega menus incorporam banners ou imagens de destaque de produtos. Gráficos ocupam bastante espaço horizontal. Se o menu parecer apertado, reduza o tamanho das imagens antes de alargar todo o contêiner além dos limites convencionais da tela.

As telas de celular são muito mais estreitas que os painéis de desktop: verifique a versão mobile de um mega menu separadamente da versão desktop, em vez de presumir que as medidas do desktop se mantêm.

Pick a Size That Works for Thumbs: Tap Targets and Readability

Não determine as dimensões do seu menu por tentativa e erro visual. Padrões globais de acessibilidade e pesquisas ergonômicas oferecem parâmetros consistentes para áreas de toque e legibilidade.

De acordo com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2) do W3C, o Critério de Sucesso 2.5.8 (Target Size Minimum, Nível AA) exige que os alvos de ponteiro meçam no mínimo 24 by 24 CSS pixels, exceto em casos específicos de exceção (W3C Target Size Minimum).

Para uma ergonomia tátil aperfeiçoada, o Critério 2.5.5 (Target Size Enhanced, Nível AAA) determina uma dimensão mínima de 44 by 44 CSS pixels (W3C Target Size Enhanced). O W3C recomenda atingir esse tamanho mínimo independentemente do espaçamento ao redor em botões e links de navegação fundamentais.

Pesquisas do Nielsen Norman Group confirmam essas diretrizes: a medida física mínima de um alvo de toque deve ser de aproximadamente 1cm by 1cm (0.4in by 0.4in) (NN/g Touch Target Size). O NN/g enfatiza ainda que os elementos interativos devem primeiro ser suficientemente grandes, e só depois adequadamente espaçados.

Além dos alvos de toque, a flexibilidade da fonte é essencial. O critério WCAG 1.4.4 (Resize Text) estabelece que o texto deve poder ser ampliado em até 200 % sem ferramentas de assistência e sem perda de conteúdo ou funcionalidade (W3C Resize Text). Aprofunde-se no tema lendo nosso guia de acessibilidade de navegação.

Test on a narrow screen and at larger text

A conformidade com as normas exige testar o menu em telas pequenas. Sob o critério WCAG 1.4.10 (Reflow), o conteúdo de rolagem vertical deve operar plenamente em uma largura equivalente a 320 CSS pixels sem necessidade de rolagem horizontal (W3C Reflow).

Ao auditar o menu:

• Abra as ferramentas do desenvolvedor no navegador e configure a largura para 320 pixels CSS.
• Expanda a gaveta lateral e os submenus para garantir que nenhum texto seja cortado nas bordas.
• Aumente o zoom de texto do sistema para certificar-se de que os botões mantêm toque confortável e boa legibilidade.

When You Still Need Custom CSS (and How to Test It Safely)

A maioria dos ajustes de tamanho pode ser feita diretamente nas configurações visuais do seu app de navegação. No entanto, caso seu tema imponha regras rígidas de folha de estilo ou falte uma opção específica, o CSS personalizado pode ser útil.

Observe as diretrizes da plataforma Shopify:

• Escopo global no tema: As regras CSS inseridas na configuração do tema afetam todas as páginas da loja virtual, exceto a página de checkout (Shopify Adding Custom CSS).
• Limite de caracteres: A Shopify limita o campo global de CSS personalizado a 1500 caracteres (Shopify Adding Custom CSS).
• Cópia de segurança do tema: A Shopify recomenda expressamente duplicar o tema antes de editar código ou inserir estilos CSS (Shopify Duplicating Themes), possibilitando reverter erros visuais imediatamente.
• Classes específicas por tema: A nomenclatura de classes varia amplamente entre temas da Shopify. Copiar trechos de fóruns sem avaliar a compatibilidade de seletores costuma gerar inconsistências visuais.

Assista a este vídeo explicativo sobre como alterar o tamanho da fonte do menu em um tema da Shopify:

Vídeo: Demonstração da alteração do tamanho da fonte de menu em um tema da Shopify.

Troubleshooting: Size Not Changing, Text Cut Off or Wrapping

Durante o redimensionamento de menus, podem ocorrer três problemas visuais comuns:

1. Alterações de tamanho não aparecem na loja

• Nível de menu incorreto: Verifique se editou as opções do Nível 1 ou dos Níveis secundários 2/3. Modificar o Nível 1 não altera os submenus que possuem configurações próprias.
• Modo de pré-visualização de dispositivo: Certifique-se de estar operando no perfil adequado. Valores para desktop não afetam a visualização mobile.
• Armazenamento em cache do navegador: Os navegadores guardam cópias de estilos. Teste a loja em uma janela de navegação anônima.
• Estilos conflitantes do tema: Regras de CSS do próprio tema podem ter maior especificidade. Inspecione o elemento para identificar qual regra tem precedência.

2. Texto do menu cortado (Truncamento)

Conforme documentado pelo W3C, termos muito extensos para o espaço horizontal disponível acabam sendo truncados (W3C Resize Text).

Como solucionar:

• Alargar o contêiner: Aumente a largura da gaveta ou do submenu.
• Reduzir moderadamente a fonte: Diminua ligeiramente o tamanho da tipografia.
• Resumir legendas: Substitua nomes longos de coleções por expressões mais curtas.

3. Quebra de linha em duas linhas vs reticências

Segundo o MDN Web Docs, a exibição de reticências (...) exige a aplicação combinada de text-overflow: ellipsis, overflow: hidden e white-space: nowrap (MDN text-overflow).

Se o texto quebra para a segunda linha sem reticências, trata-se de uma quebra normal de parágrafo. Isso não constitui um erro: manter o texto em duas linhas é frequentemente preferível a cortar letras, desde que a altura da linha comporte ambas as linhas com folga.

Figura 3: Ilustração conceitual — Comparação entre rótulos truncados em uma gaveta estreita e títulos ajustados em uma gaveta alargada.

Trade-offs: What Resizing Cannot Fix

O redimensionamento melhora a clareza e a facilidade de toque, mas impõe limitações estruturais:

• Menor densidade de itens visíveis: Fontes maiores e linhas mais altas facilitam o toque, mas reduzem a quantidade de opções visíveis na tela. Os visitantes precisam rolar mais para ver todas as opções.
• Catálogos caóticos não se corrigem diminuindo a fonte: Apenas diminuir o texto em um menu saturado de categorias não melhora a usabilidade. Cria apenas um bloco ilegível. Menus lotados exigem reorganização do catálogo, não miniaturização.
• Perda do fundo da loja: Uma gaveta de largura total acomoda frases extensas, mas esconde completamente a loja. Deixar uma faixa de fundo visível ajuda o consumidor a manter o senso de orientação.
• Diferenças entre desktop e mobile: Medidas ideais em telas panorâmicas raramente funcionam em telas de toque verticais. Avalie cada valor separadamente em ambas as plataformas.

Where Navi+ Fits

Caso seu tema da Shopify não disponha de controles dedicados para a largura da gaveta mobile ou para a barra inferior, o Navi+ Tab Bar & Mega Menu fornece ferramentas visuais para Tab Bar, Mobile Menu e Mega Menu.

Recursos comprovados no aplicativo:

• Tipografia por nível: Defina Font Size (em px) de forma independente para categorias principais (Nível 1) e subitens (Níveis 2 e 3) (configurações de design de nível 1 do Navi+).
• Altura de linhas e espaçamento: Configure Min Height (em px) e ajuste o preenchimento vertical Item Padding por nível para garantir toques seguros (configurações de design de nível 1 do Navi+).
• Dimensões dos ícones: Ajuste o Icon Size (em px) para os ícones de navegação em todos os níveis (configurações de design de nível 1 do Navi+).
• Largura de submenus e mega painéis: Configure Submenu Width em menus simples de coluna única (configuração de largura do submenu) e larguras expandidas em mega menus.
• Dimensões de contêiner: Defina a altura da barra de abas inferior e a largura da gaveta do menu mobile (no mobile e no desktop).
• Sintaxe de espaçamento responsiva: Os campos aceitam a sintaxe mobile | desktop para atribuir valores distintos a celulares e computadores em um só campo.
• Estrutura organizada em 3 níveis: Suporta até 3 níveis hierárquicos para preservar uma navegação lógica e descomplicada.

Se o seu tema não tem nenhuma configuração para a largura da gaveta ou a altura da barra de abas, o Navi+ Tab Bar & Mega Menu permite definir tamanho do texto, altura dos itens, tamanho dos ícones e largura do menu por nível, com pré-visualização antes de publicar. Experimente primeiro em um tema duplicado.

Action Checklist

Utilize este roteiro de 8 pontos para auditar e testar o menu antes de disponibilizá-lo aos clientes:

• Duplicar o tema: Gere uma cópia de segurança do seu tema ativo antes de qualquer alteração de código ou CSS (Shopify Duplicating Themes).
• Configurar fontes por nível: Estabeleça tamanhos de texto diferentes para links primários e subitens.
• Definir altura mínima de linha: Ajuste o preenchimento ou a altura mínima para toques confortáveis.
• Calibrar a largura do contêiner: Alargue a gaveta ou submenu para acomodar os títulos de coleções mais longos.
• Equilibrar dimensões de ícones: Dimensione os ícones em proporção à altura do contêiner.
• Validar alvos de toque: Assegure-se de que os elementos clicáveis atinjam pelo menos 24×24 pixels CSS (W3C Target Size Minimum).
• Testar a 320 pixels CSS: Verifique o layout em 320 pixels CSS sem surgimento de rolagem horizontal (W3C Reflow).
• Verificar cortes sob zoom: Examine os textos com ampliação de 200% para evitar cortes inesperados (W3C Resize Text).

FAQ

How do I make the mobile menu text bigger without code?

Utilize as opções visuais de tipografia integradas no seu tema ou no seu aplicativo de navegação. Enquanto muitos temas da Shopify exigem alterações manuais em folhas de estilo CSS (fudge.ai), um aplicativo como o Navi+ oferece um controle de tamanho de fonte para cada nível (configurações de design de nível 1 do Navi+).

How wide should a mobile menu drawer be?

Não existe uma medida universal rígida. A gaveta deve preservar uma faixa visível da loja para não desorientar o visitante, além de largura suficiente para acomodar títulos sem cortes em telas de 320 pixels CSS (W3C Reflow).

How big should menu tap targets be?

De acordo com o WCAG 2.2 AA, os alvos de toque devem ter no mínimo 24 por 24 pixels CSS (W3C Target Size Minimum), enquanto o padrão AAA recomenda 44 por 44 pixels CSS (W3C Target Size Enhanced). O Nielsen Norman Group recomenda uma medida física aproximada de 1cm por 1cm (NN/g Touch Target Size).

Why is my menu text cut off?

O texto do menu é truncado quando os títulos excedem o espaço horizontal do contêiner (W3C Resize Text). Corrija alargando a gaveta ou submenu, reduzindo um pouco o tamanho da fonte ou encurtando o nome da categoria.

Do I need to duplicate my theme before adding CSS?

Sim. A Shopify recomenda categoricamente criar uma cópia de segurança do seu tema antes de alterar código ou introduzir folhas de estilo personalizadas (Shopify Duplicating Themes).

Sources

• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Critério 2.5.8 sobre dimensões mínimas de alvos táteis (Nível AA).
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Enhanced) — Critério 2.5.5 sobre dimensões ideais de alvos (Nível AAA).
• W3C Web Accessibility Initiative: WCAG 2.2 Resize Text — Critério 1.4.4 sobre redimensionamento de texto em até 200%.
• W3C Web Accessibility Initiative: WCAG 2.2 Reflow — Critério 1.4.10 sobre rolagem vertical a 320 pixels CSS.
• Nielsen Norman Group: Touch Target Sizes on Mobile Devices — Pesquisa de Aurora Harley sobre dimensões físicas de alvos móveis.
• Shopify Help Center: Duplicating Themes — Guia de criação de cópias de segurança de temas antes de edições.
• Shopify Help Center: Adding Custom CSS to Themes — Documentação sobre escopo e limites de caracteres no CSS de temas.
• fudge.ai: How to Change the Mobile Menu in Shopify — Guia para configurar o menu mobile no Editor de temas da Shopify.
• MDN Web Docs: text-overflow CSS Reference — Referência técnica sobre as propriedades text-overflow, overflow e white-space.
• Navi+ Help Center: Level 1 Design Settings — Documentação sobre Font Size, Icon Size, Min Height e espaçamento.
• Navi+ Help Center: Layout Settings — Documentação sobre Submenu Width e mega menus.