Modo de depuração - Encontrar seletores CSS

O modo de depuração é um conjunto de ferramentas leve integrado à biblioteca Navi+ que ajuda você a trabalhar de forma mais eficaz com os menus do Navi+.

1. Encontrar seletores CSS

Para ativar o modo de depuração, use o seguinte formato de URL: yourdomain.com#navidebug-on

Seu site mudará para o Modo de Depuração do Navi+. Passe o mouse sobre diferentes áreas do site para visualizar seus seletores CSS correspondentes. Mova o cursor para localizar precisamente a área de destino desejada.

Preste atenção nos atalhos de teclado abaixo para trabalhar de forma mais eficiente.

Atalho 1. Copiando um seletor CSS

  • Pressione ⌘+C no MacOS ou Ctrl+C no Windows para copiar o seletor CSS selecionado.

Você pode então colá-lo nas configurações do Publish Menu para:

  • Mega Menu / Grid Menu: para inserir o menu antes, depois ou substituir o seletor CSS de destino
  • Slide Menu: para acionar o slide menu quando o seletor CSS de destino for clicado ou tocado

Atalho 2. Navegando entre níveis de seletores

  • Pressione [↑/←], ou Backspace para mover para um seletor de nível pai
  • Pressione [↓/→] para mover para um seletor de nível filho

Dicas importantes: Na maioria dos casos, você não encontrará o seletor CSS perfeito imediatamente. Com base na experiência, muitas vezes é mais fácil:

  1. Começar selecionando um seletor de nível filho
  2. Em seguida, subir 1–2 níveis pais (um destaque visual aparecerá em seu site)
  3. Copiar o seletor usando ⌘+C (Ctrl+C)
  4. Colá-lo na configuração do menu e testar

Às vezes, você pode precisar repetir esse processo várias vezes ao inserir, substituir ou vincular eventos de menu a seletores CSS para alcançar a experiência do usuário desejada.

1.1. Encontrar o Seletor CSS no Desktop

1.2. Encontrar Seletor CSS no Móvel

Para encontrar um seletor CSS no móvel, ative o modo Móvel (Responsivo) em seu navegador. Então clique com o botão direito em qualquer lugar da página e selecione:

  • Chrome: Inspecionar
  • Safari: Inspecionar Elemento
  • Firefox: Inspecionar
  • Edge: Inspecionar / Inspecionar Elemento