Skip Navigation

[Resolved] JS in filter section of page

This support ticket is created 6 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 1 reply, has 1 voice.

Last updated by dmitryK-2 6 years, 2 months ago.

Author
Posts
#609846

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'))
{
$('<a class="hover-link"></div>')
.attr('href', $(this).attr('href'))
.on('click', function(e){ e.stopPropagation(); })
.appendTo($(this));
}
$(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');
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});

});

CSS for this looks like that:

<css code>

/*---MOBILE MENU---*/

/* switch off the Search button on Default header */
div.et_menu_container span#et_search_icon {
display:none;
}
/* make the enclosing container transparent on Centered and Centered Inline Logo headers */
div.et_menu_container div.mobile_nav {
background-color:transparent !important;
}
/* switch off the Select Page text on Centered and Centered Inline Logo headers */
div.et_menu_container span.select_page {
display:none !important;
}
/* switch off the mobile logo on Default and Centered headers */
div.et_menu_container div.logo_container {
/*display:none;*/
}
.mobile_menu_bar{padding-bottom: 0px;}

/* this is used when viewport is at top of page */
#main-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}
/* this is used when we scroll and have a fixed header */
#main-header.et-fixed-header {
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}

.et_non_fixed_nav ‪#‎main‬-header, .et_non_fixed_nav ‪#‎top‬-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
}

/* style the opened mobile menu hamburger (make it an 'X') */
div.mobile_nav.opened .mobile_menu_bar:before {
font-family: "ETmodules";
content: "\4d";
}
/* color both the open and close hamburgers */
div.mobile_nav.opened .mobile_menu_bar:before{
color: #f2e2da;
font-size:45px !important;
}

div.mobile_nav.closed .mobile_menu_bar:before {
color: #EED8CE;
font-size:45px !important;
}

/* style the container that the menu elements are housed in */
.et_mobile_menu {
/* background is white by default */
background-color:rgba(238,216,206,.85) !important;
border: 1px solid #EED8CE;
border-radius: 10px;
}

/* style the menu items */
.et_mobile_menu li a {
color:#263642 !important;
}

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

#609959

Sorry been fixed by further investigations. code to be changes with "mobile_nav1" selector

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.