Botones en el Menu de Divi

Botones en el menu de Divi.

Como poner botones en el menu de Divi para que los titulos se vean de una forma más singular. En los diferentes cursos de Divi hemos ido viendo como personalizar módulos y secciones. Muchas veces queremos personalizar el menu de divi theme. Con este pequeño código verás como es de sencillo hacer que los títulos de tu menú en Divi se vean como botones.

Puedes modificar el color del botón en el enlace activo o al pasar el ratón por encima. También puedes hacer más o menos redondo el radio de los botones para que se ajuste al diseño que más te guste.

.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: #007DBC; /***CODIGO PARA CAMBIAR 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; /*** CODIGO PARA CAMBIAR EL COLOR DE FONDO EN HOVER ***/
}
#top-menu li.current-menu-item > a {
background: #C96310; /*** CODIGO PARA CAMBIAR EL COLOR DE FONDO DEL ENLACE ACTIVO ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
content: none;
}

Otra opción a personalizar el menu de Divi

Si lo que prefieres es que se vea en vez de botones en el menu de Divi, una línea debajo del título del menú, entonces el código CSS que debes añadir en la sección de Apariencia / Personalizar / Añadir código CSS es el siguiente:

Si lo que quieres es una sóla línea en vez de botones, el código a añadir 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: #FF0000; /***CAMBIAR EL COLOR DE LA LINEA INFERIOR ***/
height: 4px; /*** CAMBIAR EL GROSOR DE LA LINEA INFERIOR ***/
-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%;
}