Avisos
Vaciar todo

[Resuelto] menu divi movil desplegable  

 
JOSE MANUEL
 JOSE MANUEL
Estimable Member

Hola, me gustaría hacer que el menu divi en la version movil fuera desplegable, es decir, en vez de aparecer como actualmente todo desplegado y bastante dificil de leer, aparezca con un desplegable en el que solo se pueda abrir las opciones sobre las que pinchemos... Podeis ayudarme a hacerlo??? gracias.

Contenido solo visible a usuarios registrados

Respondido : 21/12/2022 5:10 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Respondido : 21/12/2022 5:30 pm

JOSE MANUEL
 JOSE MANUEL
Estimable Member

@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;
}

Respondido : 21/12/2022 5:44 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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 

Respondido : 21/12/2022 5:56 pm

JOSE MANUEL
 JOSE MANUEL
Estimable Member

@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

Respondido : 21/12/2022 6:14 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

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 

Respondido : 21/12/2022 6:18 pm

JOSE MANUEL
 JOSE MANUEL
Estimable Member

@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>
Respondido : 22/12/2022 9:32 am
Pepe me gusta
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Jose manuel

Genial !!! Me alegra que lo solucionaras.

Muchas gracias por compartirlo 😉 

Cualquier consulta que tengas no dudes en comunicarlo.

 

Un saludo

Respondido : 22/12/2022 9:47 am