Divisores verticales: Cómo añadirlos al menú de Divi

Cada menú que se construye para una web es altamente personalizable y gracias a Divi las posibilidades son casi infinitas. Hoy veremos cómo agregar divisores verticales entre los elementos de tu menú de Divi.

Tiempo de lectura estimado: 2 minutos

Índice

Cómo añadir divisores verticales al módulo de menú en Divi

Si quieres que los divisores verticales se vean en todos los elementos del menú:

Si usas una plantilla en el header, el snippet que verás acá aplicará al módulo de menú de Divi, así que la recomendación es usar una plantilla de header en el Divi builder.

No necesitas agregar ninguna clase al módulo, ya que lo estamos apuntando, pero si deseas que este efecto solo se aplique a un módulo de menú en tu página web, reemplaza el .et_pb_menu con tu propia clase CSS y agrégalo al campo CSS del módulo en la pestaña de Avanzado.

El snippet a continuación debes copiarlo en la caja de CSS Personalizado de las Opciones de Tema de Divi.

/*add borders to the menu items*/

.et_pb_menu li:not(:last-child) {
  border-right: 2px solid #4e51cb;
}
/*adjust spacing around menu items*/

.et_pb_menu li a {
  padding: 2px 20px;
}

Si estás usando el header por defecto del tema Divi, el snippet que debes copiar es muy similar al anterior, con la diferencia de que la propiedad CSS ya no apuntará al módulo del menú sino al menú por defecto.

/*add borders to the menu items*/

#top-menu li:not(:last-child) {
  border-right: 1px solid #c3c3c3;
  margin-bottom: 20px;
}


/*adjust spacing around menu items*/

#et-top-navigation nav > ul > li > a {
  padding-bottom: 4px!important;
  padding-left: 20px;
}

¡Así de fácil es tener divisores verticales en tu menú!

¿Quieres saber más sobre personalizar el menú de Divi?

En este tutorial de Divi aprenderás a hacer «Sticky» o fija una columna dentro de Divi, o el menú hecho con el Theme Builder, de manera sencilla y agregando algunos cachos de código.

De la mano de Quadlayers, un equipo de desarrolladores que hacen cosas realmente maravillosas, en este review podrás conocer QuadMenu, un super plugin que te permitirá configurar un super menú con Divi de una manera super fabulosa, fácil y cómoda.

Recuerda que también puedes unirte a nuestra comunidad premium y acceder a todos nuestros cursos, tutoriales y contenidos descargables de manera inmediata suscribiéndote desde $6 USD/m.

¡Espero haberte ayudado! Nos leemos en la próxima.