Site URL: hidden link
Hello, I'm using this hack from Divi - hidden link
Divi Mobile Menu Hack: Collapsing Nested Sub Menu Items
It works great on mobile menu on header of site, BUT I try to adopt it to additional menu can be seen on page provided in topic, (dont forget to "squeze" browser window to switch site to mobile view.
Shortcode for my menu is - it is inserted in filter section of WordPress Archive for Woocommerce Views:
[et_pb_fullwidth_menu admin_label="WC-Cats-Shop-Menu" menu_id="115" background_color="#f9f9f9" background_layout="light" text_orientation="center" submenu_direction="downwards" fullwidth_menu="on" dropdown_menu_animation="fade" menu_font_size="16px"][/et_pb_fullwidth_menu]
And I've inserted adopted code toJS section under Filter block - but I have no luck with it. Please help to fix this issue.. Thank you and hope for fast reply, Dmitry
All prerequesites are done (because my main top menu works as expected - menu with subitems becomes nested). Adopted code for second mobile menu goes below:
jQuery( document ).on(
function($) {
function setup_collapsible_submenus() {
var $menu = $('#mobile_menu1'),
top_level_link = '#mobile_menu1 .menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ( $(this).is(top_level_link) ) {
if ($(this).parent().hasClass('always-visitable'))
{
$(' @media only screen and ( max-width: 981px ) {
#top-menu-nav, #top-menu {display: none;}
#et_top_search {/*display: none;*/}
#et_mobile_nav_menu {display: block;margin-top: 20%;}
.et_search_outer{/*padding-top: 10%;*/}
}
/*style collapsed nested menu items on mobile js inserted in Body of Divi integration*/
#menu-shop-wc-prodcat-039-s-amp-endpoints.et_mobile_menu .menu-item-has-children > a,
#main-header .et_mobile_menu .menu-item-has-children > a,
#WC-Cats-Shop-Menu .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#menu-shop-wc-prodcat-039-s-amp-endpoints.et_mobile_menu .menu-item-has-children > a:after,
#main-header .et_mobile_menu .menu-item-has-children > a:after,
#WC-Cats-Shop-Menu.et_mobile_menu .menu-item-has-children > a:after
{ font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#menu-shop-wc-prodcat-039-s-amp-endpoints.et_mobile_menu .menu-item-has-children > a:after ,
#main-header .et_mobile_menu .menu-item-has-children > a:after
{ font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#WC-Cats-Shop-Menu.et_mobile_menu .menu-item-has-children > a:after
{ font-size: 16px; content: '\4c'; top: 0px; right: 0px; }
#menu-shop-wc-prodcat-039-s-amp-endpoints.et_mobile_menu .menu-item-has-children.visible,
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after{ content: '\4d'; }
#WC-Cats-Shop-Menu .et_mobile_menu .menu-item-has-children.visible > a:after
{ content: '\4d'; }
#menu-shop-wc-prodcat-039-s-amp-endpoints.et_mobile_menu ul.sub-menu,
#main-header .et_mobile_menu ul.sub-menu,
#WC-Cats-Shop-Menu .et_mobile_menu ul.sub-menu
{ display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#menu-shop-wc-prodcat-039-s-amp-endpoints.et_mobile_menu .visible > ul.sub-menu,
#main-header .et_mobile_menu .visible > ul.sub-menu,
#WC-Cats-Shop-Menu .et_mobile_menu .visible > ul.sub-menu
{ display: block !important; visibility: visible !important; }
#menu-shop-wc-prodcat-039-s-amp-endpoints .et_mobile_menu .always-visitable,
#main-header .et_mobile_menu .always-visitable,
#WC-Cats-Shop-Menu .et_mobile_menu .always-visitable
{
position: relative;
/* this li is clickable. change ui accordingly! */
}
#menu-shop-wc-prodcat-039-s-amp-endpoints .et_mobile_menu .always-visitable .hover-link,
#main-header .et_mobile_menu .always-visitable .hover-link,
#WC-Cats-Shop-Menu .et_mobile_menu .always-visitable .hover-link
{
position: absolute;
top: 0; left: 0; bottom: 0;
/* leave some space so right area works. you decide how much */
right: 30%;
/* for debugging — delete */
/*background-color: #ff0;*/
/*opacity: 0.3;*/
}
</css code>
