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:

DESPUÉS:

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Í:

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

MÁS PEQUEÑAS:

MÁS GRANDES:

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:

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:

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Ú:

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

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:

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

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:

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 😉

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.

¿Te ha resultado útil?

¡Danos 5 oks!

Enviar la puntuación

Promedio de puntuación 4.3 / 5. Recuento de votos: 15

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en los medios sociales!

También te puede interesar...

Personalizar los títulos H1, H2, H3, H4, H5 y H6 de la plantilla Divi

Cambiar icono teléfono por icono WhatsApp en Divi ¡2 minutos!

• Facebook
• Twitter
• Linkedin

12 Comentarios

1. 

   boris andres el 26 agosto, 2021 a las 21:04

   Hola! Gracias por compartir este contenido, me será muy útil. Estoy buscando la forma de obtener el resultado 5 pero con dos iconos de redes sociales en medio de la hambuerguesa y el logo.. Me pueden ayudar por favor.
   Gracias y saludos

   Responder
2. 

   Gabriel el 20 diciembre, 2020 a las 12:04

   Buenos días Max,

   Muy interesante y práctico. Únicamente informarte que he aplicado en mi web la de menú on hove y la de añadir la palabra menú pero esta última no he conseguido que funcione. Uso. Evidentemente uso Divi y lo he copiado en el lugar para el código css personalizado. ¿Alguna idea de por qué puede no funcionar?

   Gracias

   Responder
3. 

   Francisco el 3 julio, 2020 a las 07:47

   Como le das una transparencia al menú divi?

   Saludos,

   Responder
4. 

   Lara el 28 mayo, 2020 a las 12:43

   Perfecto !!! Muchas gracias.

   Responder
5. 

   Mariano el 22 mayo, 2020 a las 14:29

   Hola,

   ¿Hay alguna forma de poner elementos del menú centrados y otros a la derecha? Por ejemplo, tengo un Woocommerce y a la derecha quiero poner el carrito, cuentta y tienda y en el centro home, about us y contact.

   Gracias!

   Responder
6. 

   Yasser el 17 abril, 2020 a las 23:00

   Hola, te felicito excelente articulo, mi pregunta es si tienes el codigo css para quitar por completo el menu en la version movil, solo quiero dejar el logo y el menu secundario con el carrito de compra. Un saludo

   Responder
7. 

   Carlos Barrera el 14 noviembre, 2019 a las 09:19

   Excelente tutorial!

   Responder
8. 

   Ado Ello el 17 junio, 2019 a las 17:45

   Muchas gracias, en concreto estaba buscando lo de traducir/eliminar lo de Select Page.

   Responder
9. 

   Haissar Pinto el 27 abril, 2019 a las 05:22

   Me podrias ayudar con algo… quiero poner el menu principal dentro de un bloque de ancho complto de color solido en DIVI

   Responder
   • 

     Jorge Hernandez el 5 agosto, 2019 a las 19:41

     Muy enriquecedor muchas gracias. Mi duda es como hacer para que el menú tipo hamburguesa (las tres lineas) en versión móvil se alinee a la izquierda.

     Responder
10. 

    Fernando el 10 abril, 2019 a las 01:15

    Cordial saludo. Como hago para colocar un banner encima del menu, en ese banner voy a colocar los logos de las redes sociales

    Responder
11. 

    Yasert el 21 febrero, 2019 a las 20:17

    Hola, tengo un inconveniente y necesito de favor que me ayuden con el tema.
    Sucede que es primera vez que uso Divi, de hecho, primera vez que uso wp; y la verdad que estoy muy contento con Divi y sus opciones ya que no trabajo con grandes empresas, si no con negocios pequeños y pequeñas empresas.

    Sin embargo, al hacer el menú principal que aparece en la cabecera y justificado hacia la derecha (del visitante), los submenús se me despliegan hacia abajo y eso está bien… El problema es que están uno debajo de otro (en posición vertical) y me interesa que estén uno de lado de otro (en posición horizontal).

    Estaré eternamente agradecido con la ayuda que puedan ofrecerme.

    Responder

Enviar comentario Cancelar la respuesta

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

Nombre *

Correo electrónico *

Web

Comentario *

He leido y acepto la política de privacidad

Δ