Vamos a ver cómo hacer con Divi un menú que se queda pegado al borde superior cuando hacemos scroll en la página.

El menú pegajoso no se encuentra en la parte superior cuando cargamos la página pero a medida que bajamos éste sube hasta quedarse fijo en el borde. No pasa de largo como el resto del contenido.

Este tipo de menú le permite al usuario saltar rápidamente a otro contenido sin tener que volver a subir a través de la página.

Si bien en este ejemplo, tomado del blog de Divi, construimos un menú de categorías de blog, una vez que aprendas a hacerlo vas a poder darle cualquier otra utilidad.

Está técnica que vamos a ver sirve para crear cualquier elemento de la página que queremos que suba y que se quede fijo en borde superior de la pantalla cuando hacemos scroll en la página.

Preparar la plantilla Divi de base

Lo primero que tenemos que hacer es preparar una plantilla Divi o layout a la cual añadirle nuestro menú «pegajoso».

Ya que en este ejemplo construimos un menú de categorías de blog que se queda pegado al borde superior de las entradas voy a usar una plantilla de entradas que ya tiene creado su encabezado, cuerpo y pie de página.

Esta plantilla de entradas ya cuenta con dos menús en la parte superior, pero nosotros vamos a añadir un tercer menú debajo de estos dos.

Antes de comenzar es importante tener claro dos cosas:

1. Este menú se añade desde el Generador de temas o Theme builder de Divi, no editando la entrada o página particular.
2. El menú lo voy a crear dentro del Cuerpo de la plantilla de entradas, no en el Encabezado global, ya que no quiero utilizarlo en el sitio completo sino solo en las entradas del blog.

En la imagen anterior podemos ver cuál será la posición del nuevo menú pegajoso, en la parte superior del cuerpo de la plantilla de entradas.

¡Comencemos!

Sección y Fila del menú pegajoso

Vamos entonces al Generador de Temas o Theme Builder de Divi y buscamos la plantilla a la que vamos a añadirle el menú.

En mi caso, y por lo que expliqué antes, voy a editar el Cuerpo de la plantilla para colocar el nuevo menú allí. No en el Encabezado global.

Una vez dentro del editor tenemos que agregar una nueva sección de Divi en la parte superior del cuerpo, en el lugar que quiero colocar el nuevo menú que se va a quedar fijo en el borde superior cuando hagamos scroll.

A esta sección le añadimos también una fila con estructura de una sola columna.

Ajustes de la sección

Antes de seguir agregando módulos vamos a los ajustes de la sección para asignarle un color de fondo y reducir los márgenes internos.

En la sección Fondo definimos:

• Color de Fondo: #f92c8b

En la pestaña Diseño sección Separación definimos:

• Relleno: 1vw superior, 1vw base

Ajustes de la fila

Luego vamos a los ajustes de la fila y también definimos un fondo pero en este caso con la opción gradiente. También vamos reducir los márgenes internos y redondear las esquinas.

En la sección Fondo definimos:

• Color del gradiente 1: #f92c8b
• Color del gradiente 2: #ffd625
• Dirección del gradiente: 90deg

En la pestaña Diseño sección Separación definimos:

• Relleno: 0px superior, 0px base.

Bajamos a la sección Borde y definimos

• Rectángulo redondeado: 20px.

Y así es como te debería estar quedando el diseño. Con un color de fondo pleno para la sección y un gradiente en la fila.

Esta es la barra de nuestro menú que cuando bajemos en la página va a subir hasta quedarse pegado en el borde superior.

Ahora nos queda insertar el menú propiamente dicho.

Módulo Menú

Dentro de la fila insertamos un módulo Menú de Divi y en la pestaña Contenido de los ajustes seleccionamos el menú que queremos mostrar. En este caso un menú de categorías.

Es importante tener en cuenta que este menú tiene que estar previamente creado en la sección Menús de WordPress.

Luego vamos a la pestaña Diseño y asignamos los siguientes estilos al módulo Menú.

En la sección Diseño definimos:

• Estilo: Centrado.

En la sección Texto del menú definimos:

• Fuente del Menú: Ubuntu
• Espesor de la fuente: Negrita
• Estilo de fuente: TT (mayúsculas)
• Color: #ffffff
• Espacio entre letras: 2px
• Altura de línea: 2em

En la sección Tamaño definimos:

• Ancho: 90%
• Alineación: Centrado.

Y así nos queda nuestro menú terminado.

Configurar la visibilidad

Ahora nos queda solo configurar los ajustes de visibilidad de la sección y la fila.

En los ajustes de la sección vamos a la pestaña Avanzado y en las opciones de Visibilidad definimos:

• Desbordamiento horizontal: visible.
• Desbordamiento vertical: visible.

Y luego vamos a la sección Puesto y definimos:

• Indice Z: 999.

Esto es importante para lograr que la sección que contiene al menú quede siempre en una capa por encima del resto de los elementos de la página que van a ir pasando por debajo.

Después vamos a los ajustes de la fila y hacemos algo similar:

• Desbordamiento horizontal: visible.
• Desbordamiento vertical: visible.

Y por último vamos de nuevo a los ajustes de la sección para insertar un código CSS que es el que va a permitir el efecto pegajoso, para que el menú suba cuando hacemos scroll pero se quede pegado en el borde superior en vez de salir de la pantalla.

position: -webkit-sticky !important;
position: sticky !important;
superior: 0px;

Este código lo pegamos en la pestaña Avanzado dentro de la sección CSS Personalizado y en el campo Elemento principal.

Eso es todo, ahora solo queda guardar la plantilla y cargar cualquier entrada del blog para ver cómo queda nuestro menú que se queda pegado al borde superior cuando bajamos por la página.

El resultado

Así es como vemos la entrada ni bien ingresamos. Lo que está arriba es el encabezado global del sitio web que contiene dos menús, íconos sociales y un botón de llamada a la acción.

Y luego viene el menú pegajoso de categorías.

Cuando comenzamos a bajar en la página el menú sube por la pantalla igual que el resto de los elementos pero al llegar al borde superior se queda fijo allí y el resto del contenido sigue pasando por debajo.

Espero que te hayan gustado. Dejame debajo un comentario contándome que te parecieron estas características y posibilidades de Divi.

Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.