[Resuelto] menu divi movil desplegable  

Hola Jose Manuel.

Revisa esta entrada del Blog donde tratamos el tema:

-> https://www.webempresa.com/blog/crear-un-menu-movil-colapsable-y-desplazable-con-divi.html

Un saludo

@pepesoler

Ya pobré esos códigos antes de preguntar en el blog, lo vi en una respuesta de otro participante. El problema es que no me funciona correctamente, me aparece un logo o imagen de cruz, al lado derecho bastante feo en el desplegable y además , los menus inferiores del menu no los recoge, es como si funcionara solo para la parte superior del menu.   Te adjunto o pego aqui todos los codigos que tenemos personalizando nuestra cabecera y menu:

@media (max-width: 980px){
#et-info {
display: none;
}
#top-header .et-cart-info {
border: 1px solid #fff;
padding: 5px;
margin-bottom: 2px;
}
#top-header {
padding-bottom: 30px;
z-index: 1;
}

#main-header {
z-index: 99999999;
padding: 0 0px 10px 0 !important;
}

#et_top_search {
position: absolute;
top: -47px;
left: 0;
}
.et_header_style_centered #et_search_icon:before {
color: #fff;
}
#logo {
position: absolute;
max-width: 91px;
margin-left: -15%;
}
.et_hide_mobile_logo #main-header .logo_container {
display: block;
opacity: 1;
position: absolute;
width: 100%;
top: -24px;
}
}
a.button.add_to_cart_button {
font-size: 10px;
float: right;
margin-top: -30px !important;
}
a.button.add_to_cart_button:after {
font-size: 12px;
top:6px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
margin: 0 3.8% 2.992em 0;
}
@media (max-width: 980px){
.et_header_style_centered #et_top_search, .et_vertical_nav.et_header_style_centered #main-header #et_top_search {
display: initial !important;
}
.et_header_style_centered #et_search_icon:before {
top: 2px;
}
.et_header_style_centered .et_search_outer, .et_header_style_split .et_search_outer {
display: block;
top: -60px;
}
#top-header .et-cart-info {
position: absolute;
right:0;
}
}
@media (max-width: 479px){
#logo {
max-width: 70px;
margin-left: -48px;
}

#top-header .et-cart-info {
font-size: 12px;
}
.et-cart-info span:before {
margin-right: 5px;
}
}
.woocommerce ul.products li.product .price .amount, .woocommerce-page ul.products li.product .price .amount {
font-size: 20px !important;
color: #2c91ea !important;
}

@media (max-width: 980px) {
#et-secondary-nav, #et-secondary-menu{
display: block !important;
}
}

input.button.wc_points_rewards_apply_discount {
color: white;
}
@media (max-width: 980px) {
.et_hide_mobile_logo #main-header .logo_container {
top: -00px !important
}
}
@media (max-width: 980px) {
.et_non_fixed_nav.et_transparent_nav #main-header, .et_non_fixed_nav.et_transparent_nav #top-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important; } }
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
@media (max-width: 980px) {
div#et-info {
display: block !important;
padding-bottom: 0 !important;
}
.container.et_search_form_container {
max-width: 200px !important;
margin-left: 20px !important;
color: #fff !important;
border: 1px solid #fff;
height: auto !important;
}
.et_header_style_centered .et-search-form input {
top: auto !important;
position: relative !important;
right: auto;
left: -10px;
width: calc(100% - 30px);
}
form.et-search-form {
position: relative !important;
}
.et_header_style_centered .et_search_outer {
top: -28px;
}
span.et_close_search_field:after {
font-size: 28px !important;
color: #fff !important;
margin-top: -5px;
}
input.et-search-field::placeholder {
color: #fff;
}}
@media (max-width: 980px) {
input.et-search-field {
color: white;
}
}

#et-main-area{
position: relative;
z-index: 0;
}
span.wc-points-rewards-product-message {
color: #c65986 !important;
font-size: 20px !important;
}
button.single_add_to_cart_button.button.alt {
background-color: #2ea3f2;
color: white !important;
border: none !important;
}
button.single_add_to_cart_button.button.alt:hover {
background-color: #009ada;
}
a.wl-add-to.wl-add-to-single.wl-add-but.button.present {
background-color: #108bf5;
color: white !important;
border: none !important;
}
.woocommerce div.product form.cart .button {
background-color: #2ea3f2!important;
color:#fefefe;
}
.custom-menu a.et_pb_menu__icon.et_pb_menu__cart-button, .custom-menu .et_mobile_nav_menu {
width: 100%;
justify-content: center;
}

Hola Jose Manuel, 

En este caso puedes aplicar lo que se menciona en la entrada, una vez lo tengas nos comentas para poder revisar que sucede y porque no se aplican los cambios de la misma forma en tu sitio web. 

Un saludo 

@karen

es decir, que siga los pasos de esta entrada: ->  https://www.webempresa.com/blog/crear-un-menu-movil-colapsable-y-desplazable-con-divi.html

Hola Jose,

Es correcto, realiza los pasos tal como se indican en esa guía y luego de que los realices nos comentas para poder ver que es lo que se ha realizado mal en caso de que no se configure de forma correcta y se vea como comentas, con una cruz.

Un saludo 

@karen

Lo hemos solucionado con el soporte tecnico de divi, nos han facilitado este codigo que funciona perfectamente, lo pego por aqui por si puede servir de ayuda a mas personas. 

Step 1: Add the following CSS Code to Divi ➤ Theme Options ➤ Custom CSS:

/*Proper Collapsable Mobile Menu*/

/*Style the icon's placeholder*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
	border-bottom: 0;
	text-align: center;
}
ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}
.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
	background-color: transparent;
}

/*Hide the Sub-menu*/
ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}

/*Show the sub-menu when the + icon is clicked*/
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}

/*Create the opening/closing icon using the Divi's Icons*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
}

/*Set the opening icon for custom Tax Pages*/
body.single-product:not(.et-tb-has-template) ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-product_cat ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-project_category ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.single-product.et-db:not(.et-tb-has-template) #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-product_cat.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
body.tax-project_category.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	content: "+";
}

/*Set the opening icon for default WordPress Pages*/
ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	content: "\4c";
}

/*Set the closing icon*/
ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.single-product:not(.et-tb-has-template) ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.single-product.et-db:not(.et-tb-has-template) #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-product_cat ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-product_cat.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-project_category ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after,
body.tax-project_category.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open > .mobile-toggle::after {
	content: '\4d';
}

Step 2: Add the following JS code to Divi ➤ Theme Options ➤ Integration tab ➤ Add code to the < head > of your blog

### jQuery version:

<script id="dt-collapsable-menu-items">
jQuery(function ($) {
	$(document).ready(function () {
		$("body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu  li.page_item_has_children").append('<a href="#" class="mobile-toggle"></a>');
		$('ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, ul.et_mobile_menu li.page_item_has_children .mobile-toggle').click(function (event) {
			event.preventDefault();
			$(this).parent('li').toggleClass('dt-open');
			$(this).parent('li').find('ul.children').first().toggleClass('visible');
			$(this).parent('li').find('ul.sub-menu').first().toggleClass('visible');
		});
		iconFINAL = 'P';
		$('body ul.et_mobile_menu li.menu-item-has-children, body ul.et_mobile_menu li.page_item_has_children').attr('data-icon', iconFINAL);
		$('.mobile-toggle').on('mouseover', function () {
			$(this).parent().addClass('is-hover');
		}).on('mouseout', function () {
			$(this).parent().removeClass('is-hover');
		})
	});
});
</script>

Hola Jose manuel

Genial !!! Me alegra que lo solucionaras.

Muchas gracias por compartirlo 😉 

Cualquier consulta que tengas no dudes en comunicarlo.

Un saludo