El menú de una web es una de las partes más importantes de esta y no solo por su estética, sino porque funciona como guía y organización de todos los contenidos. Consigue que el usuario pueda encontrar fácilmente la información que necesita, al mismo tiempo que tú puedes poner a su disposición la información estructurada que quieres ofrecer.

Por eso, si estás buscando optimizar tu menú y aportarle un toque más personal y diferente, te recomiendo leer el siguiente post que nos ha escrito un invitado muy especial, Max Camuñas, diseñador web con mucha experiencia en esta plantilla y en crear webs profesionales.

¡Te dejo con sus 6 códigos CSS para personalizar el menú de Divi!

6 Formas de personalizar el menú de Divi como un profesional

La organización de una página web es fundamental para ordenar todos sus contenidos y darle toda la información al usuario de forma sencilla y accesible.

Como diseñador web especializado en WordPress + Divi, siempre digo que, a la hora de estructurar un sitio web, uno de los elementos principales es el menú.

Por ese motivo, en este post te voy a explicar cómo personalizar el menú de Divi como un profesional, con el correspondiente código CSS que debes introducir para conseguir cada uno de estos efectos.

¡Vamos allá!

1 Alinear el menú a la izquierda

El menú por defecto de Divi viene alineado a la derecha, pero con el siguiente código podemos moverlo a la parte izquierda.

ANTES:

Menu Divi derecha

 

DESPUÉS:

Menú Divi centrado

 

CÓDIGO:

/* Alinear el menú a la izquierda */
@media only screen and (min-width: 981px) {
    #et-top-navigation {float: left; margin-left: 60px;}
}

2 Modificar el tamaño de las barras del menú móvil

Otra forma de modificar el menú de Divi es hacer más grande o más pequeñas las barras en la versión móvil.

POR DEFECTO SERÍAN ASÍ:

Menu Divi Movil

Pero podemos hacerlas más grandes o más pequeñas en función de nuestras necesidades.

MÁS PEQUEÑAS:

MENU-DIVI-MOVIL

MÁS GRANDES:

MENU-DIVI-MOVIL

CÓDIGO:

/* Modificar el tamaño de las barras del menú móvil */
span.mobile_menu_bar.mobile_menu_bar_toggle:before {font-size: 25px;}

(Solo tenemos que modificar la etiqueta font-size).

3 Alinear el menú centrado en el móvil

El siguiente efecto está disponible para el menú centrado, que en el móvil se vería de la siguiente forma si lo dejamos por defecto:

menu-principal-divi-movil

Pero podemos alinearlo al centro y hacer que no aparezca el cuadro de “seleccionar página”, quedando mucho más estético y limpio.

EL RESULTADO SERÍA:

menu-principal-divi-movil

Y EL CÓDIGO A APLICAR ES EL SIGUIENTE:

/* alinear el menú centrado en el móvil */
@media only screen and (max-width:980px) {
.mobile_nav .select_page {
display: none!important;
}
.et_header_style_centered #main-header .mobile_nav {
background-color:transparent!important;
}
.et_header_style_centered .mobile_menu_bar {
position: fixed;
top: 5%;
right: 15%;
}
}

(Podemos jugar con las etiquetas top y right para ajustarlo según nuestras necesidades).

4 Hover en el menú móvil

Y seguimos con la versión móvil del menú de Divi.

Si queremos añadir un efecto hover cuando el usuario se desplaza por el menú, debemos utilizar sl siguiente código:

/*hover menú móvil*/

/* Menu mobile */
.et_mobile_menu li a:hover, .nav ul li a:hover {
background: #d55939 !important;
color: #fff !important;
opacity: 1;
}

DE FORMA PREDETERMINADA, ESTE SERÍA EL MENÚ:

personalizar-menu-divi-movil

Y SI AÑADIMOS ESTE EFECTO, EL RESULTADO SERÍA EL SIGUIENTE:

personalizar-menu-divi-movil

Mucho más atractivo, ¿verdad?

(En este caso, podemos jugar con las etiquetas background y color para personalizar los colores de nuestro menú).

5 Eliminar “select page” en el menú móvil

Continuamos con otro efecto más para el menú de Divi en el móvil.

Vamos a ver cómo eliminar el texto “select page”, pues es poco estético.

Este efecto está disponible para el tipo de menú llamado logotipo centrado en línea.

ESTE SERÍA EL MENÚ POR DEFECTO:

eliminar-seleccionar-pagina-menu-divi

Y ASÍ QUEDARÍA DESPUÉS DE APLICAR EL CÓDIGO:

eliminar-seleccionar-pagina-menu-divi

El resultado es mucho más limpio y ordenado.

EL CÓDIGO PARA CONSEGUIR ESTE EFECTO ES:

/* Eliminar Select page en el menú del móvil*/
@media (max-width:980px){
.et_header_style_split 
header#main-header
 .logo_container {
height: 100% !important;
float: left !important;
position: absolute !important;
z-index:0 !important;
}

.et_header_style_left #logo, 
.et_header_style_split #logo {
max-height:100px;
margin-top: -10px;
}

.et_header_style_split #main-header 
.container, .et_header_style_split 
#main-header 
.logo_container {text-align:left !important;}
.et_header_style_split 
#et_mobile_nav_menu{margin: 0;}
.et_header_style_split 
#main-header 
.mobile_nav{background-color: transparent; 
padding-left: 247px;}
.et_header_style_centered 
.mobile_nav .select_page, 
.et_header_style_split .mobile_nav 
.select_page {
display: none;
}
.et_header_style_split #main-header {
padding: 40px 0;
}
}

6 Añadir un texto en el menú móvil de Divi

Para terminar, otro efecto chulo que nos permite personalizar el menú de Divi en la versión móvil.

En este caso, podemos añadir un texto que acompañen a las barras del menú.

AQUÍ PODEMOS VER UN EJEMPLO:

ejemplo-menu-divi

Muy interesante, ¿verdad?

EL CÓDIGO PARA CONSEGUIR ESTE EFECTO ES:

/* Menú móvil nombre */
.mobile_menu_bar.mobile_menu_bar_toggle::after {
content: "MENÚ";
position: absolute;
top: 38px;
right: 2px;
font-size: 10px;
}

RECUERDA: si quieres utilizar alguno de estos códigos para personalizar el menú de Divi, debes pegarlos en Divi > Opciones de tema > CSS personalizado.

Hasta aquí este tutorial para personalizar el menú de Divi como un auténtico profesional. Espero que os hayan gustado y los apliquéis en vuestros sitios web 😉

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (10 votos, ¿Te ha resultado útil? ¡Danos un 5!)
Cargando…

 

Max Camuñas es Diseñador Web en WordPress. Diseña páginas con gancho, que cargan rápido y están optimizadas para SEO. Es amante de la creatividad, el marketing y los animales. Además dirige un magazine digital y es responsable de varios proyectos online.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

¡APRENDE MÁS SOBRE DIVI!

¿Quieres estar al día de todo lo que compartimos en Divesp?

Consentimiento

¡Gracias! Ahora VE A TU BANDEJA DE ENTRADA para confirmar tu suscripción.