Como centralizar os itens do menu na Loja Integrada

Uma navegação bem estruturada é essencial para oferecer uma boa experiência ao usuário, e centralizar os itens do menu é um dos detalhes que fazem a diferença no visual da loja. Neste guia, você aprenderá como aplicar esse ajuste usando apenas CSS com Flexbox, de forma simples e eficaz. As instruções a seguir funcionam perfeitamente na maioria dos Loja Integrada templates, ajudando a criar um layout mais moderno e profissional para sua Loja Integrada.

• Por que centralizar o menu?
• 1. Acesso ao editor de CSS
• 2. Centralização com Flexbox
• 3. Ajustando espaçamentos entre itens
• 4. Removendo elementos visuais indesejados
• Checklist final
• 5. Aplicação passo a passo
• Dicas avançadas
• Conclusão

Por que centralizar o menu?

Centralizar os itens do menu ajuda a criar uma aparência mais equilibrada e agradável para a navegação da sua loja. É um detalhe visual simples, mas que transmite organização e profissionalismo.

1. Acesso ao editor de CSS

1. Entre no painel da sua loja na Loja Integrada.
2. No canto superior direito, clique no ícone de engrenagem.
3. Selecione Aparência (ou “Editar CSS” conforme o tema).

Esse é o local onde você insere ajustes customizados de estilo, como centralização do menu.

2. Centralização com Flexbox

Se o seu menu estiver estruturado com a classe .menu-items ou .menu.superior ul.nivel-um, adicione o seguinte CSS:

@media (min-width: 768px) {
  .menu-items, 
  .menu.superior ul.nivel-um {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

• display: flex transforma o menu em container flexível.
• justify-content: center centraliza horizontalmente.
• align-items: center centraliza verticalmente.
• @media (min-width: 768px) aplica o estilo apenas em telas maiores, evitando problemas no mobile.

3. Ajustando espaçamentos entre itens

Para controlar o espaçamento entre os itens do menu com Flexbox, você pode usar:

.menu.superior .nivel-um > li {
  margin: 0 20px; /* espaço entre os itens */
}

4. Removendo elementos visuais indesejados

Para deixar o menu mais limpo, remova bordas ou ícones que possam aparecer nos itens:

.menu.superior .nivel-um > li {
  border: none;
}

.icon-chevron-down:before {
  content: none;
}

✅ Checklist final

Etapa	Verificação
1. Acessou Editar CSS	✅
2. Adicionou CSS em theme child	✅
3. Usou Flexbox	✅
4. Ajustou espaçamentos	✅
5. Removeu ícones/barras desnecessárias	✅
6. Testou em desktop e mobile	✅

5. Aplicação passo a passo

1. Vá em Minha Loja → Aparência → Editar CSS.
2. No final do arquivo CSS, cole o código com Flexbox.
3. Adicione os ajustes de espaçamento e limpeza, se necessário.
4. Salve as alterações.
5. Recarregue sua loja para visualizar o menu centralizado.
6. Teste em diferentes dispositivos (desktop e mobile).

Dicas avançadas

• Sempre use @media (min-width: 768px) para manter compatibilidade com o mobile.
• Verifique se seu tema já usa Flexbox e apenas complemente o CSS.
• Use margin ou padding para espaçamento ideal entre itens.

Conclusão

Centralizar o menu na Loja Integrada com Flexbox é uma forma simples e eficaz de melhorar o visual da sua loja. Com poucos ajustes em CSS, você alcança um layout mais profissional e moderno. Teste os estilos e personalize conforme a identidade da sua marca.