¡Hola! ¿Cómo estás? Espero que todo vaya bien 🙂

En este artículo quiero mostrarte varias opciones muy interesantes para personalizar el menú en Divi.

El tema de Divi siempre lo puedes encontrar al mejor precio aquí: https://www.elegantthemes.com

Hay ocasiones en las que queremos ir un pasito más lejos a la hora de personalizar nuestra web con Divi, afortunadamente tenemos muchas modificaciones disponibles, vamos a ello.

Estas modificaciones van a requerir utilizar un poquito de código, pero no te preocupes, es muy fácil de insertar.

He preparado esta guía también en vídeo por si te resulta más agradable así:

¿Dónde puedo hacer las personalizaciones básicas del menú?

Para realizar esta personalización básica ve a Apariencia > Personalizar

A continuación pulsa sobre Cabecera y navegación

Desde aquí podrás realizar todas las configuraciones básicas.

Modificaciones con código

Antes de comenzar vamos a ver dónde insertar en código.

Pulsa sobre “Divi” en el panel de la izquierda, accederemos a la zona de “Opciones del tema”

Estando en esta página vamos a hacer scroll abajo del todo, nos encontraremos con la sección de “CSS personalizado”, va a ser aquí donde insertaremos nuestros fragmentos de código.

Todos los códigos que veremos a continuación los podrás personalizar, aspectos como el color o el grosor verás que son sencillos de modificar.

Añadir una línea en movimiento debajo del título

Mediante este efecto aparecerá una línea debajo del elemento del menú sobre el que el visitante ponga el ratón 

Podremos modificar el color y el grosor con facilidad.

El código es:

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
 content: "";
 position: absolute;
 z-index: 2;
 left: 0;
 right: 0;
}
#top-menu li a:before {
 content: "";
 position: absolute;
 z-index: -2;
 left: 0;
 right: 100%;
 bottom: 50%;
 background: #15bf86; /*** Color de la línea***/
 height: 3px; /*** Grosor de la línea ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#top-menu li a:hover {
 opacity: 1 !important;
}
#top-menu li a:hover:before {
 right: 0;
}
#top-menu li li a:before {
 bottom: 10%;
}

Alinear el menú totalmente a la izquierda

Mediante este código lograremos que el menú pase de estar así:

A estar así:

El código a introducir sería:

/* Menú alineado a la izquierda */
@media only screen and (min-width: 981px) {
    #et-top-navigation {float: left; margin-left: 60px;}
}

Añadir borde a los títulos

Podremos tener un menú con este diseño:

El código CSS es:

#top-menu li > a:hover {
 box-shadow: 0 7px 0 0 #F15A29 !important; /*** Color y grosor de la línea cuando se pasa el cursor***/
 padding-bottom: 34px;
 opacity: 1 !important;
}
#top-menu li li a {
 padding-bottom: 6px !important;
}
#top-menu li.current-menu-item > a,
.et-fixed-header #top-menu li.current-menu-item > a {
 border: 7px solid #D5A810; /*** Grosor y color de la caja ***/
 padding: 7px;
 margin-bottom: -7px;
}

Añadir botones a los títulos

Con este código lograremos una personalización así:

El código es:

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
 padding-bottom: 15px;
}
#top-menu li {
 padding-right: 5px;
}
#et-top-navigation {
 padding: 20px 0 !important;
}
#top-menu li a {
 background: #C1B2AB; /*** El color de fondo ***/
 padding: 15px 20px;
 border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
 color: #fff !important;
}
#top-menu li a:hover {
 background: #559CAD !important; /*** Color de fondo cuando se pone el cursor encima ***/
}
#top-menu li.current-menu-item > a {
 background: #edc77b; /*** Color de fondo del enlace activo ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
 content: none;
}

Centrar el menú en móviles

Mediante este código podremos pasar de este diseño:

A este:

El código css es:

/* Centrar el texto del menú para móvil */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0px !important;
}

Cambiar las tres rayitas por una equis o aspa

Pasaremos a tener este diseño:

El código a integrar es:

/* Cambiar el icono de colapso a una X en el menú hamburguesa */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}

Quitar la línea superior en móviles

Pasaríamos de:

A tenerlo así:

El código CSS es:

/* Quitar la línea superior del menú para móvil */
.et_mobile_menu {
border-top:0px;
}

Hacer que el menú para móvil tenga altura completa

Tendríamos este diseño:

El Código CSS es:

/* Hacer que el menú para móvil sea de altura completa */
.et_mobile_menu {
min-height:100vh !important;
min-height: -webkit-fill-available;
padding-top:50px !important;
}
html {
height: -webkit-fill-available;
}

Espero que estos pequeños fragmentos de código te sirvan para seguir personalizando tu sitio web con Divi.

Muchas gracias por pasarte por aquí y nos leemos muy pronto.