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.

 

DESCUENTOS DIVI

 

 
 

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.

 

Donde añadir el css cuando no tenemos un child theme

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

}

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO BLOOM + MAILCHIMP (7 Clases)
4.- CURSO SEO (19 Clases)
5.- CURSO BLOG WORDPRESS (32 Clases)
6.- CURSO WOOCOMMERCE (39 Clases)
7.- CURSO FLATSOME WORDPRESS Parte 1 (14 Clases)
8.- CURSO COLORES WEB (9 Clases)
9.- CURSO ANALYTICS (10 Clases)
10.- CURSO GESTIÓN IMÁGENES WEB (15 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

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.