Botones rectangulares grandes en el menú principal de Divi

Si has trabajado con la plantilla Divi para WordPress habrás visto que una limitación que tiene es la forma de mostrar los items del menú principal.

Existen plantillas para wordpress que muestran el menú principal con elementos rectangulares, de hecho a mí me lo ha comentado algún cliente y siempre he tenido que decir que con Divi no se puede.

Hoy os traigo un código CSS de Geno Quiroz con el cual conseguiremos que el menú principal se estructure en forma de elementos rectangulares.

▷LLÉVATE EL CURSO WORDPRESS Y DIVI GRATIS

Aprende a crear una página web con Wordpress y Divi

22 vídeos gratis

Email

Consentimiento

• Acepto la política de Privacidad

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.

*** RESPONSABLE: Joaquín Barberá Aledo (servidor) | *** FINALIDAD: enviarte mis nuevos contenidos y lo que vea que puede interesarte (Nada de SPAM) | *** LEGITIMACIÓN: tu consentimiento (que estás de acuerdo) | DESTINATARIOS: los datos que me facilitas estarán ubicados en los servidores de MailChimp (proveedor de email marketing de horizonweb.es) fuera de la UE en EEUU. MailChimp está acogido al acuerdo EU-US Privacy Shield, aprobado por el Comité Europeo de Protección de Datos. | *** DERECHOS: por supuesto tienes derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.

1.- DEMO MENÚ BOTONES RECTANGULARES CON DIVI

Aquí te dejo una demo de la visualización del menú con elementos rectangulares: DEMO

Cuando se hace clic sobre un elemento del menú, la fuente pasa de oscuro a claro y queda inscrita en un botón rectangular de color azul.

Cuando pasamos el ratón por algún elemento del menú, éste pasa también a estar inscrito en un rectángulo de color azul.

2.- CONFIGURACIÓN DE DIVI ANTES DE INTRODUCIR EL CÓDIGO

Lo único realizado en la configuración de Divi ha sido eliminar el icono de búsqueda del menú y poner el texto del encabezado del menú en negrita.

3.- DONDE INTRODUCIR EL CÓDIGO CSS

Child theme: en caso de utilizar un tema hijo o child theme deberás incluir el código en el archivo style.css. Esto lo puedes hacer de dos formas diferentes:

a.- Vía FTP (+ difícil): Descárgate el archivo vía FTP, añádele el código CSS y vuélvelo a subir

b.- Editor de WordPress (+ fácil): También puedes hacerlo yendo a «Apariencia > Editor». Selecciona el archivo style.css y modifícalo directamente añadiendo el código al final del archivo. No te olvides de guardar

Plantilla Divi: si no utilizas un tema hijo o child theme deberás añadir el código en el archivo style.css de la plantilla Divi. Esto lo puedes hacer de dos maneras.

a.- Epanel (+ fácil): lo puedes hacer desde el panel de administración de wordpress yendo a “Divi > opciones del tema”. En la pestaña “general” ve a la parte inferior de la página, verás que hay un área de texto titulada: “CSS Personalizado”. Copia y pega el código CSS en dicha área de texto y pulsa el botón de guardar cambios.

Añadir CSS cuando no tenemos un child theme

4.- PERSONALIZAR BOTONES DEL MENÚ

Para personalizar el color de fondo de los botones del menú tendrás que modificar el código. En los lugares donde tendrás que modificar el color verás la nota: /*cambiar color de fondo aquí*/

Si cambias los colores en el personalizador esto puede sobrescribir este CSS.

/* ----------------------------------- */
/* Menu - Botones Rectangulares menu Divi */
/* Plantilla Divi, modificaciones menú */
/* ----------------------------------- */

@media only screen and (min-width : 981px) {

/* Borrar carrot de los elementos de menú desplegables */
#top-menu .menu-item-has-children > a:first-child, #et-secondary-nav .menu-item-has-children > a:first-child {padding-right: 0px;}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display:none;}

/* menu padding */
#et-top-navigation {
padding-top: 0px!important;
font-weight:100;}
#top-menu li {
margin-left: -3px;
padding-right: 0px;}
#top-menu li > a {
padding: 33px 30px 33px 30px!important;}

/* remove color fade in on menu text */
#top-menu a {
color: #000;}

/* colores items de menu */
#top-menu li.current-menu-item {
background-color: #0065cb;} /*cambiar color de fondo aquí*/
#top-menu li.current-menu-item > a {
color:#fff!important;}

/* colores hover items de menu */
#top-menu li:hover {
background-color: #0065cb;} /*cambiar color de fondo aquí*/
#top-menu li > a:hover {
color: #fff;
opacity: 1!important;}

/* current menu ancestor background color */
.current-menu-ancestor {
background-color: #0065cb;} /*cambiar color de fondo aquí*/
.current-menu-ancestor a {
color: #fff!important;}

/* sub menu adjustments */
.sub-menu {
padding: 0px!important;}
#top-menu li li a {
padding: 19px 5px 19px 8px!important;}
.current-menu-ancestor .sub-menu a {
color: #000!important;}
.current-menu-ancestor .sub-menu a:hover {
color: #fff!important;}

}