Modo de depuración - Encontrar selectores CSS

El modo de depuración es un conjunto de herramientas ligero integrado en la biblioteca Navi+ que te ayuda a trabajar de manera más efectiva con los menús de Navi+.

1. Encontrar selectores CSS

Para habilitar el modo de depuración, utiliza el siguiente formato de URL: yourdomain.com#navidebug-on

Tu sitio web cambiará al Modo de Depuración de Navi+. Pasa el ratón sobre diferentes áreas del sitio web para ver sus correspondientes selectores CSS. Mueve el cursor para localizar con precisión el área objetivo deseada.

Por favor, presta atención a los atajos de teclado a continuación para trabajar de manera más eficiente.

Atajo 1. Copiar un selector CSS

  • Presiona ⌘+C en MacOS o Ctrl+C en Windows para copiar el selector CSS seleccionado.

Luego puedes pegarlo en la configuración del Menú de Publicación para:

  • Mega Menu / Grid Menu: para insertar el menú antes, después o reemplazar el selector CSS objetivo
  • Slide Menu: para activar el menú deslizante cuando se hace clic o se toca el selector CSS objetivo

Atajo 2. Navegar entre niveles de selectores

  • Presiona [↑/←], o Retroceso para moverte a un selector de nivel padre
  • Presiona [↓/→] para moverte a un selector de nivel hijo

Consejos importantes: En la mayoría de los casos, no encontrarás el selector CSS perfecto de inmediato. Basado en la experiencia, a menudo es más fácil:

  1. Comenzar seleccionando un selector de nivel hijo
  2. Luego subir 1–2 niveles padres (un resaltado visual aparecerá en tu sitio web)
  3. Copiar el selector usando ⌘+C (Ctrl+C)
  4. Pegar en la configuración del menú y probar

A veces, puede que necesites repetir este proceso varias veces al insertar, reemplazar o vincular eventos de menú a selectores CSS para lograr la experiencia de usuario deseada.

1.1. Encontrar el selector CSS en Desktop

1.2. Encontrar el selector CSS en Móvil

Para encontrar un selector CSS en móvil, habilita el modo Móvil (Responsivo) en tu navegador. Luego haz clic derecho en cualquier parte de la página y selecciona:

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