¿Usando configuraciones integradas o CSS personalizado?

Navi+ proporciona varias opciones de configuración comunes para menús, en la “Design” tab, tales como fondo, tipografía (familia de fuentes, tamaño..), e íconos/imágenes (tamaño, espacio, curva…). Al usar estas configuraciones, tu menú generalmente puede ser estilizado para coincidir con el diseño y la marca general de tu sitio web.

Navi+ soporta menús de hasta 3 niveles. En la “Design” tab, solo puedes configurar el estilo para 2 niveles, y no hay una opción directa para establecer el tamaño de fuente o el tamaño de íconos/imágenes para los menús de nivel 2 y nivel 3. Entonces, ¿cómo puedes hacer eso?

Personalización profunda del menú con la herramienta CSS & Coding

Sin embargo, si tú o tu desarrollador web tienen un entendimiento básico de CSS (Hojas de Estilo), pueden personalizar todo el diseño del menú usando la herramienta integrada “CSS & Coding” en Navi+ sin editar directamente los archivos de tu tema. Esto ofrece varios beneficios:

• Puedes separar las configuraciones de CSS para los menús de Navi+ de tu tema. Esto significa que actualizar o cambiar tu tema no afectará tus menús de Navi+.
• Navi+ utiliza un mecanismo de protección inteligente al agregar automáticamente un prefijo (como #SF-123456789) al inicio de cada regla CSS. Esto mantiene el CSS para diferentes menús de Navi+ aislado, minimizando el riesgo de conflictos de estilo.
• Si es necesario, aún puedes agregar CSS que afecte a todo el sitio web directamente dentro de Navi+, aunque esto debe usarse con moderación y solo cuando sea necesario.

Nota importante: El cuadro de texto de Hoja de Estilo Interna / CSS agrega automáticamente un prefijo (por ejemplo, #SF-123456789) antes de cada regla CSS. Esto asegura que tu CSS solo se aplique al menú específico que se está personalizando y previene conflictos de estilo.

Algunos estudios de caso típicos de uso de CSS

1) Para configurar la apariencia de todo el menú en el nivel más alto, puedes escribir un fragmento que no es CSS estándar pero muy simple. Por ejemplo, el fragmento a continuación cambia el fondo del menú a rojo. Agrega el siguiente código al cuadro de texto de Hoja de Estilo Interna / CSS:

{
    background: red;
}

2) Configura el tamaño, la tipografía y los colores para cada nivel de ítem del menú. Agrega el siguiente código al cuadro de texto de Hoja de Estilo Interna / CSS:

// Personaliza el estilo de texto de los ítems del menú de nivel 1
ul > li.item > .inner .name {
    font-size: 14px;
    color: red;
}

// Personaliza el estilo de texto de los ítems del menú de nivel 2
ul.children[menulevel="2"] > li.child > .inner .name{
     font-size: 16px; 
     color: blue;
}

// Personaliza el estilo de texto de los ítems del menú de nivel 3
ul.children[menulevel="3"] > li.child > .inner .name{
     font-size: 13px; 
     color: green;     
}

3) Cambia el grosor de la fuente usando font-weight. Agrega el siguiente código al cuadro de texto de Hoja de Estilo Interna / CSS:

// Establece el grosor de la fuente del nombre
.name {
  font-weight: 700;
}

// Establece el grosor de la fuente de la descripción
description {
  font-weight: 700;
}

4) Ajusta el tamaño de la flecha. Agrega el siguiente código al cuadro de texto de Hoja de Estilo Interna / CSS:

ul > li.is-parent-top::after {
  font-size: 24px !important;
}