Como criar um MENU HAMBURGUER no GreatPages

COMO CRIAR O ELEMENTO DE MENU

1. Acesse o editor de páginas;

2. Clique no ícone de "+" no lado esquerdo da tela e em seguida selecione "Menu";

3. Quando fizer isso o elemento de Menu será adicionado no editor de páginas e para editá-lo é necessário clicar em Editar;

4. Quando fizer isso, entre as opções de edições você poderá configurar o estilo do elemento, começando por:

ALINHAMENTO

• Alinhamento: Selecione o tipo de alinhamento que deseja colocar no menu (alinhado a esquerda, alinhado a esquerda ou centralizado).
• Fixar no topo: Opção de fixar o menu no topo da página. Ao rolar a página para baixo, o menu permanecerá suspenso.

LOGO

• Logo: (Opcional) Selecione a imagem do logo que será apresentado ao lado do menu.
• Tamanho: Configuração do tamanho do logo apresentado no menu da página.

CORES E ESTILOS DE FONTES

• Cor do painel: Cor de fundo do elemento de menu.
• Cor de hover: Cor que aparecerá na opção do menu ao passar o cursor do mouse encima.
• Fonte do menu: Fonte utilizada nos textos do menu.
• Fonte dos submenus: Fonte utilizada nos textos dos submenus.

BORDAS

• Bordas: Selecione se o elemento de menu terá ou não bordas.

5. Depois de configurar a parte visual do elemento de menu, clicando em Configurar você poderá dar início a configuração de ação dos botões, começando pelos itens. Para adicionar novos itens no menu clique em "Adicionar item";

6. Ao fazer isso abrirá uma tela onde você poderá configurar o item preenchendo os campos abaixo;

• Rótulo: Nome do item do menu.
• Destino: Página de destino do item do menu. Caso queira vincular o clique a um bloco específico da mesma página opte por "Bloco da página".
• Abrir em nova aba: Opção de a página de destino do menu ser aberta em uma nova página, ao invés de abrir na página atual de navegação.
• Subitens: Configuração de subitens do menu (submenus).

7. Após configurar os itens do menu, ainda na tela de configurações, temos a opção de ativar ou desativar a visibilidade do menu, que consiste em ocultar este elemento em uma das versões da página, Desktop (computadores) ou Mobile (celulares);

8. Por último, acessando a opção "Código" você poderá copiar o código do elemento ou editar o HMTL (apenas modifique o HTML do elemento se tiver conhecimento em código).

COMO CRIAR O MENU HAMBURGUER

O elemento de menu hamburguer é mostrado na versão Mobile da página.

Depois de criá-lo na versão desktop da página siga os próximos passos abaixo:

9. Clique em "Mobile" no centro superior da tela e em seguida localize o ícone de menu hamburguer e clique em "Editar";

10. Em seguida irá abrir o menu de configurações ao lado, onde poderá editar as opções abaixo:

• Ícone: Ícone exibido para abertura do menu.
• Cor do ícone: Cor do ícone exibido para abertura do menu.
• Cor do painel: Cor de fundo das opções do menu expandidas.
• Cor do hover: Cor dos itens do menu ao passar o cursor do mouse encima.

11. Abaixo da configuração das cores, é possível configurar as fontes do menu e as fontes dos submenus;

• Fontes dos menus: Fontes dos itens do menu.
• Fontes dos submenus: Fontes dos subitens do menu.

12. E por último, temos a configuração de espaçamento entre os itens do menu e as opções de bordas;

• Espaçamento entre itens: Espaço entre os itens do menu.
• Borda do painel: Bordas do painel de exibição dos itens do menu.
• Borda do ícone: Bordas do ícone do menu.

13. Depois disso, todas as configurações são iguais as configurações da versão Desktop. E é importante lembrar que as configurações realizadas em uma das versões será refletida na outra.

Esperamos ter ajudado! Qualquer dúvida, chame nosso suporte. Estamos sempre à disposição.

Atualizado em: 15/09/2026