O Menu de navegação do ElementsKit widget allows you to create fully customizable navigation menus in Elementor, including dropdowns, responsive mobile menus, and styling options. It works inside a header/footer template built with ElementsKit.

How It Works #

1. Enable Header/Footer module in ElementsKit → Modules.
2. Create a Header template em Cabeçalho rodapé and edit with Elementor.
3. Drag & drop the Nav Menu widget into the header.
4. Select your WordPress menu in Menu Settings.
5. Configure dropdown & mobile behavior (hover/click, breakpoints, hamburger menu).
6. Style your menu (fonts, colors, spacing, icons).

Características principais #

• Usar existing WordPress menus.
• Dropdown & mega menu support.
• Completamente responsivo with mobile hamburger control.
• Custom styling for desktop and mobile menus.
  

Check the details here:
A navigation menu widget helps to navigate menu items. It creates drop down and gives the header a nice sorted look. ElementsKit consists of many comprehensive modules and menu de navegação is one of them. It is rich in features, and easy to use.

• Usar existing WordPress menus.
• Dropdown & mega menu support.
• Completamente responsivo with mobile hamburger control.

Vamos ver como isso funciona-

Menu de navegação do ElementsKit #

Primeiro, você tem que ativar o módulo construtor de cabeçalho e rodapé.

Ativar Módulo #

Acesso ao painel: 1. Encontre ElementsKit -> 2. Clique em Módulos -> 3. Encontre Header Footer Builder -> 4. Salvar alterações

Cabeçalho rodapé #

1. No ElementsKit, clique em Cabeçalho Rodapé -> 2. Clique em Cabeçalho -> 3. Adicionar novo

Tconfigurações do modelo #

1. Configurações
   • Título- Digite um nome para o modelo
   • Tipo- Cabeçalho
   • Condições- Site inteiro
2. Activate/Deactivate- Alternar para LIGADO
3. Click Edit with ElementsKit

Costumização #

Encontre o menu de navegação do ElementsKit e arraste e solte-o. 

Contente- No Parte do conteúdo você encontrará as opções de configuração abaixo.

Configurações do menu #

• Selecione o menu- Selecionar Menu mostrará os menus existentes em seu site.
• Posição do menu horizontal- As opções de posição do menu são Esquerda, Centro, Direita e Justificado.
• Menu suspenso aberto como- Mantê-lo sobre Passe o mouse ou clique.
• Indicador de submenu– Escolha um ícone indicador suspenso (Seta de linha, seta de preenchimento, mais) that appears with the parent menu and works as a navigation key for the submenu.

• Enable one page?: Toggle this option to “Yes” to enable smooth scrolling for a single-page website layout. Ensure your menu links are set to anchor tags that point to specific sections on the same page.
• Response Breakpoint: Select the screen size where the menu collapses into a mobile toggle. Choose between Tablet or Mobile to trigger the responsive layout.

1. Clique no ícone nas configurações da barra lateral conforme mostrado na imagem acima.

2. Um pop-up abrirá uma biblioteca de ícones, clique nela.

3. Em seguida, clique no botão “Inserir”Para adicionar um ícone.

4. Você também pode adicionar seu ícone clicando no botão “Carregar”Botão, ele abrirá o Ícone personalizado Elementor configurações.

• Ativar uma página?– Se você deseja exibir o título em uma página (atual), alterne para SIM, caso contrário, NÃO.
• Ponto de interrupção responsivo- As opções são Tablet e celular.

É assim que funciona se você escolher um ponto de interrupção responsivo para dispositivos móveis e tablets.

Configurações do menu móvel #

• Logotipo do menu móvel- Defina um logotipo para visualização móvel.
• Link do menu- Mantenha o padrão para página inicial ou insira qualquer link desejado no campo URL personalizado. Quando as pessoas clicam no logotipo, elas serão redirecionadas para o link fornecido.
• Ícone de hambúrguer (opcional) – Escolha um ícone da biblioteca ou carregue o SVG.
• Área de clique do submenu- Se o menu tiver um submenu, você poderá definir o ícone para a área.

Estilo #

• Wrapper de menu- Esta seção permite ajustar a altura do menu, tipo de plano de fundo, preenchimento, largura, raio da borda do menu, espaçamento dos ícones do menu, etc.
• Estilo do item de menu- Os itens de menu podem ser estilizados aqui usando tipo de plano de fundo, cor, espaçamento de borda, margem do item, etc.
• Estilo do item do submenu- Assim como os itens de menu, você pode personalizar os itens do submenu nesta seção.
• Estilo do painel do submenu- Expandir esta parte permitirá que você personalize o painel do submenu com muitas opções.
• Estilo hambúrguer- Nesta seção, você pode estilizar o hambúrguer com diferentes cores, tamanhos, posições, opções de ícones e assim por diante.
• Logotipo do menu móvel- Esta parte é para personalizar Esta parte é para personalizar o logotipo do menu móvel de acordo com suas preferências.

Aqui preparamos um exemplo de menu de navegação, é uma visualização de desktop-

Forneça aos seus clientes um sistema fantástico para encontrar suas coisas com o influente widget de menu de navegação do ElementsKit. Portanto, use o widget agora, torne seu design atraente e economize tempo.