Cerrar video

Cómo darle estilos o personalizar el sub menú desplegable del módulo menu divi

por | Ago 18, 2020 | Tutorial gratuito | 0 Comentarios

Por defecto diseñar el sub menú desplegable (o dropdown menu) en divi no es posible con los ajustes del módulo divi, para personalizar o cambiar los estilos de este submenu debemos recurrir a un poco de código CSS. Si bien, el sub menú que viene por defecto con divi no es para nada feo, considero que es muy común en los sitios web creados con divi que podríamos descubrir si un sitio está hecho con divi o no gracias a este menú por defecto que viene con este tema.

Por lo tanto, el objetivo de este tutorial es enseñarte a cambiar la apariencia de este sub menú con un poco de código CSS, sin complicaciones.

Para realizar este ejercicio vamos a usar el menú que creamos en el tutorial anterior, si no lo haz visto sería genial que primero le dieras un vistazo. Aunque si tu menú tiene otra composición no hay problema, puedes ver este tutorial y de todas formas vas a lograr cambiar los estilos del sub menú.

Por otra parte, si te urge y no quieres perder mucho tiempo viendo este tutorial, a continuación te dejo el código CSS para que solo lo copies y pegues en el personalizador de temas / CSS personalizado, de esta manera en menos de 1 minuto ya tendrás tu submenu con estilos completamente personalizados.

@media only screen and (min-width: 981px) {
/*** Estilos sub menu divi ***/
.et_pb_menu .sub-menu {
	margin-top: 12px;
	border-radius: 6px; /* borde redondeado */
  border-top: none;
  box-shadow: 0px 2px 16px rgb(0 0 0 / 20%);
	padding: 12px 0 !important;
}

#page-container .et_pb_menu_0_tb_header.et_pb_menu .nav li ul {
  background-color: #ffffff!important; /* color de fondo sub menu */
}

.et_pb_menu .sub-menu li {
	padding: 0;
	line-height: 1.3;
	width: 100%;
}

.et_pb_menu .sub-menu li a {
	width: 100%;
	padding: 14px 25px;
}

.et_pb_menu .sub-menu li a:hover {
	color: #ff6923 !important; /* color enlace hover */
	background-color: #f9f9f9; /* color fondo hover */
  opacity: 1;
}


/* Icono marcador arriba del submenu */
.et_pb_menu nav > ul > li > .sub-menu:after {
	position: absolute;
	content:'';
  left: 36px;
  top: -26px;
  border-style: solid;
  border-width: 14px;
  border-color: transparent transparent #ffffff;
}

}

/* Icono indicador sub menu */
.et-menu .menu-item-has-children>a:first-child:after {
    content: "\43";
}
.et-menu li ul .menu-item-has-children>a:first-child:after {
	content: "\45" !important;
}

Por el contrario si quieres aprender a modificar los estilos del sub menú con un poco de código CSS no esperes más y dale play al video.

0 comentarios

Enviar un comentario

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

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest