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.

boton en menu divi

 

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:

titulos menu divi con raya inferior

 

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

Suscríbete a nuestros boletines

Mantente informado con las últimas tendencias.

Únicamente enviaremos información altamente interesante y novedosa.

¿Necesitas una auditoría SEO?

Conecta con algunos de nuestros expertos de forma totalmente GRATUITA

Comentarios

¿Qué opinas?

4 Comentarios

  1. ¿Cómo se le puede poner a los botones que solo haya una distancia de 5 px por arriba y por abajo de las letras del Menú?

    Responder
    • Hola Román, lo puedes hacer con código CSS. Si no sabes de código, te recomendaría este plugin. Miralo ya que creo te puede ser de mucha ayuda. https://yellowpencil.waspthemes.com/

      Responder
  2. Buenas! Muy bueno el codigo lo estoy usando ahora mismo! Una consulta: como peudo agregarle un border para el hover? Basicamente lo que queiro es que en el hover quede un border de otro color..Gracias!

    Responder
    • Hola Nico, como digo en otro comentario y si no sabes de css, te recomiendo el plugin yellowpencil te puede ser de gran ayuda. Yo tengo algún video explicativo sobre el plugin. Te lo busco y envio

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete

Recibe noticias semanales

Nulla porttitor pretium blandit. Suspendisse id nulla et erat feugiat vehicula. Nam ac sapien maximus sem auctor sollicitudin sit amet a enim. Nulla facilisi. Donec et commodo tellus.