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%;
}

Avanza paso a paso con nuestros cursos y tutoriales. Cursos individuales y personalizados para que aprendas a:

 

• Hacer una página web desde un principio.

• Rediseñar tu página si ya la tienes.

• Aprender plugins y tema Divi de Elegantthemes.

• Crear un ecommerce con tienda y pasarela de pago.

• Estrategias para posicionamiento SEO.

• Usar herramientas de medición como ahrefs, seolyze...

• Optimizar y solucionar aquellos problemas que no terminas de ejecutar.

 

Contacta ahora con nosotros. No esperes más.

!INFORMATE AHORA¡

Mensaje enviado