Encabezado y barra de navegación
Personaliza la cabecera y la barra de navegación de tu sitio web.
La cabecera contiene el logotipo del sitio, la navegación principal, el buscador y otros elementos típicos. Es visible en todas las páginas del sitio web. Opcionalmente, se puede sustituir por una cabecera adaptada a móviles en dispositivos más pequeños.
Header Layout – Posiciones
| POSICION | COLOR | DESCRIPCION |
|---|---|---|
Logo | Muestra el logotipo y el área del widget del logotipo. | |
Navbar | Muestra la ubicación del menú de la barra de navegación y el área de widgets. | |
Header | Muestra la ubicación del menú superior y el área de widgets. |
Horizontal Layouts
Stacked Center Layouts
El logotipo, la barra de navegación y el encabezado se muestran uno encima del otro y centrados horizontalmente. En el diseño Stacked Center C, el encabezado se divide y se alinea a la izquierda y a la derecha, mientras que el logotipo se coloca en el centro. En ambos diseños Stacked Center Split, los elementos del menú de la barra de navegación se dividen y el logotipo se coloca en el centro.
Stacked Left and Justified Layouts
Split Items
Los diseños Stacked Center C y Stacked Center Split ofrecen la opción de configurar el número de elementos a partir del cual se dividen. Esto puede ser necesario, por ejemplo, si los elementos del menú tienen longitudes diferentes o si se publican widgets adicionales en el área.
Push Items
El diseño Stacked Left permite desplazar los widgets publicados en la barra de navegación hacia la derecha. Basta con configurar el número de elementos a partir del cual los siguientes se desplazarán hacia la derecha.
Max Width
Establece el ancho máximo del contenido para el encabezado y la barra de navegación. Elige entre Predeterminado, Pequeño, Grande y Extragrande (Default, Small, Large y X-Large) para fijar un ancho máximo. La opción Expandir (Expand) amplía el encabezado al ancho completo de la ventana gráfica, manteniendo un pequeño margen a la izquierda y a la derecha. Opcionalmente, se puede eliminar el margen del logotipo en diseños donde este se ubica a la izquierda, por ejemplo, en logotipos con fondos de color.
Navbar
| OPCION | DESCRIPCION |
|---|---|
Static | La barra de navegación se desplazará fuera del área visible al hacer scroll. |
Sticky | La barra de navegación permanecerá fija en la parte superior de la ventana gráfica al desplazarse. |
Sticky on scroll up | La barra de navegación saldrá del área visible al desplazarse hacia abajo y permanecerá fija al desplazarse hacia arriba. |
Además, elige entre el estilo de barra de navegación predeterminado y el principal.
Dropdown
Alinea el menú desplegable a la izquierda, a la derecha o al centro (Left, Right o Center). De forma predeterminada, el menú desplegable está alineado con el elemento de la barra de navegación. Si lo deseas, puedes alinearlo con toda la barra de navegación. Esto puede ser útil para menús desplegables extensos.
Existen opciones adicionales para el menú desplegable.
| OPCION | DESCRIPCION |
|---|---|
Enable Dropbar | Opcionalmente, muestre los menús desplegables en una sección de ancho completo llamada barra desplegable. |
Show parent icon | Mostrar un pequeño icono para indicar que el elemento de la barra de navegación tiene un menú desplegable. |
Click mode | Los elementos de la barra de navegación que contienen solo texto (sin enlace) pueden mostrar el menú desplegable al hacer clic en lugar de al pasar el cursor por encima. |
