Cómo Personalizar Menu en Tema Divi.

Para personalizar el menu en tema Divi de Eleganttheme usaremos estilos CSS para el menu desplegable. Primero es necesario crear el menu desplegable y posteriormente añadiremos el código CSS en las opciones del Tema que puedes encontrar en Apariencia/personlaizar/ Opciones CSS. Este código lo puedes personalizar con los colores del desplegable, hover y letras que desees.

Algunas veces es necesario que el ancho del menú desplegable sea un poco más ancho ya que si no, el nombre de la pestaña del menu se nos va a una segunda línea. Entonces tendrás que añadir el 2º código CSS que te permite personalizar los anchos.

Recuerda que es importante trabajar con un tema hijo por lo que te recomendamos agregarlo con el plugin Child Theme si todavía no lo tienes hecho.

personalizar menu en tema divi

/* ##### MENU DESPLEGABLE ESTILOS ##### */

#top-menu .sub-menu {
background-color: #3c5464; /* Color de fondo Menú desplegable*/
border-top: 3px solid #EB9B04; /* Color de borde desplegable superior */
}

#top-menu .sub-menu li a {
font-size: 14px; /* Tamaño de fuente menu desplegable */
width: 100%;
color: #fff;
border-bottom: 1px solid #768792; /* Color de elemento de menú de borde inferior */
}

.sub-menu li:hover {
background-color: #EB9B04; /* Color del Elemento de menú de desplazamiento */
}

.sub-menu .current_page_item {
background-color: #EB9B04; /* Color Menú del menú desplegable */
}

#top-menu .sub-menu li {
padding-left: 0px;
padding-right: 0px;
width: 100%;
}

#top-menu li li a {
padding-top: 10px;
padding-bottom: 8px;
}

#top-menu .sub-menu {
padding-top: 0px;
padding-bottom: 0px;
}

.nav ul li a:hover {
opacity: 1;
background-color: rgba(0,0,0,0);
}

Si quieres personalizar el ancho del menu desplegable, puedes utilizar este 2º  código.

Modificando los datos en cada lugar específico podrás cambiar el ancho del menu desplegable.

/* ##### TAMAÑO MENU DESPLEGABLE ##### */

.nav li ul {
width: 380px !important; /* Ancho del menú desplegable */
}

.nav li li ul {
left: 380px !important; /* Usa el mismo tamaño que el anterior */
}

#top-menu li li a {
width: 240px; /* Haz DE este TAMAÑO 40 menos que el ancho del menú desplegable */
}

Aprende con nosotros trucos de Divi para wordpress y sigue nuestros tutoriales de la trucos de Divi para wordpress

Share This