Plugin doesn’t work with custom divi menu

Okay… I was so close to purchasing this until everything seems to not function with my custom mega-menu.

https://esseretail.co.uk/shop/ (password: letmein )

1) Clicking product categories sometimes works and other times results in a blank page. Try checking and unchecking multiple categories and you’ll see what i mean.

2) Price slider just freezes the whole site

3) Hierarchy for categories remains as a straight left aligned list

4) Mobile menu is behind all other items (the z is set for the module/widget)

5) reset filter takes an eternity.

6) always scrolls to the bottom of the page when you apply new filter (even though option is not selected).

I don’t know if all points are linked to the script or the menu or not.
Divi theme used.
Widgets used but tried shortcode.
Tried disabling ajax / refreshing the page.

https://esseretail.co.uk/test/ Check this page without the mega menu and everything works fine.

/* Enable class below once you're done editing the menu */
    
/*
.dropdown-menu {
visibility: hidden;
}
*/
   
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;
 
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);    
   
position: absolute!important;
top: 75px;
bottom: auto;
left: 0px;
right: auto;
}
   
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
 
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
} 
 
.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}
 
.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #FF6600; 
}  
   
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
 
.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
   
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF6600;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
   
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
   
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
}
   
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
   
.category-menu .et_pb_menu__menu>nav>ul>li {
position: static !important;
}
 
.category-menu .et_mobile_menu .dropdown-menu {
visibility: visible !important;
}

<script>
jQuery(function($){
$(document).ready(function(){
   
 
$('.dropdown-menu').each(function(i){
   
i = i + 1;
   
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
   
});  
   
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');
 
$firstLevel.off('click').click(function() {
 
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
 
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
 
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
 
});      
   
});
});
</script>

The page I need help with: [log in to see the link]