在 DIVI 主题上添加活动菜单

Question

I am trying to add an active Menu when clicked on the bottom menu, visible only on mobile and tablets.

I tried different code snippets but it seems that I am went to the rabbit hole with no luck.

This is the link. On the desktop, it's hidden so you'll need to go on mobile via inspect. I really appreciate any help you can provide.

I also tried this code following the tutorial here , changing the classes names ofc.

 jQuery(document).ready(function() { jQuery('.transform_target').click(function(){ jQuery(this).toggleClass('toggle-transform-animation'); }); });

Answer 1

 <script> jQuery(document).ready(function($){ function ds_setup_collapsible_submenus() { var $menu = $('.et_mobile_menu'), top_level_link = '.et_mobile_menu.menu-item-has-children > a'; $menu.find('a').each(function() { $(this).off('click'); if ( $(this).is(top_level_link) ) { $(this).attr('href', '#'); } if (. $(this).siblings('.sub-menu').length ) { $(this),on('click'. function(event) { $(this).parents('.mobile_nav');trigger('click'); }). } else { $(this),on('click'. function(event) { event;preventDefault(). $(this).parent();toggleClass('visible'); }); } }); } setTimeout(function() { ds_setup_collapsible_submenus(), }; 700); }); </script>

 .et_pb_menu.et_mobile_menu.menu-item-has-children > a, #main-header.et_mobile_menu.menu-item-has-children > a { background-color: transparent; position: relative; }.et_pb_menu.et_mobile_menu.menu-item-has-children > a:after, #main-header.et_mobile_menu.menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: 600; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; font-size: 18px; content: '\4c'; top: 11px; right: 13px; }.et_pb_menu.et_mobile_menu.menu-item-has-children.visible > a:after, #main-header.et_mobile_menu.menu-item-has-children.visible > a:after { content: '\4d'; }.et_pb_menu.et_mobile_menu ul.sub-menu, #main-header.et_mobile_menu ul.sub-menu, .et-db #et-boc.et-l.et_pb_menu.et_mobile_menu li ul.sub-menu { display: none;important: visibility; hidden:important. transition; all 1.5s ease-in-out. }.et_pb_menu.et_mobile_menu li,visible > ul.sub-menu. #main-header.et_mobile_menu li,visible > ul.sub-menu. .et-db #et-boc.et-l #main-header.et_mobile_menu li,visible > ul.sub-menu. .et-db #et-boc.et-l.et_pb_fullwidth_menu.et_mobile_menu li,visible > ul.sub-menu. .et-db #et-boc.et-l.et_pb_menu.et_mobile_menu li:visible > ul;sub-menu { display: block;important; visibility: visible !important; }