Personalizar Menu en Tema Divi

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.

/* ##### 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 */
}

Si lo que quieres es que los textos del menu se muestren como botones.

Añade este pequeño código y personaliza los colores.

/* ##### HACER LOS TEXTOS COMO BOTONES ##### */

.et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 15px;
}
#top-menu li {
padding-right: 5px;
}
#et-top-navigation {
padding: 20px 0 !important;
}
#top-menu li a {
background: #C1B2AB; /*** CAMBIA EL COLOR DE FONDO ***/
padding: 15px 20px;
border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
color: #fff !important;
}
#top-menu li a:hover {
background: #EB9B04 !important; /*** CAMBIA EL COLOR DE FONDO EN HOVER BOTON ***/
}
#top-menu li.current-menu-item > a {
background: #1F3652; /*** CAMBIA EL COLOR DE FONDO DEL ENLACE ACTIVO BOTON ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
content: none;
}

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

Avanza paso a paso con nuestros cursos y tutoriales. Cursos individuales y personalizados para que aprendas a:

 

• Hacer una página web desde un principio.

• Rediseñar tu página si ya la tienes.

• Aprender plugins y tema Divi de Elegantthemes.

• Crear un ecommerce con tienda y pasarela de pago.

• Estrategias para posicionamiento SEO.

• Usar herramientas de medición como ahrefs, seolyze...

• Optimizar y solucionar aquellos problemas que no terminas de ejecutar.

 

Contacta ahora con nosotros. No esperes más.

!INFORMATE AHORA¡

Mensaje enviado