Ao criar um menu com muitos submenus, cria-se um problema que na versão mobile não é possível ver todos os itens do menu. A solução é criar um menu recolhido onde só os itens do primeiro nível apareçam primeiramente e os do segundo nível sejam mostrados num click. Eesse tutorial mostra como fazer isso usando jQuery e CSS: https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder.
É necessário definir a classe dos menus de primeiro nível como first-level e segundo nível como second-level. Depois adiciona-se esse código ao cabeçalho:
(function($) {
function setup_collapsible_submenus() {
var FirstLevel = $('.et_mobile_menu .first-level > a');
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
}
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
})(jQuery);Além disso, tem esse código CSS:
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}Há mais um pedaço do código CSS que tive que retirar para que o menu fosse visualizado corretamente, mas deixo aqui para registro caso seja necessário em algum momento:
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}
