Solved Dropdown Window Divi Menu problem on mobile only in product pages

Hello! I have this problem here:

In "Screenshoot 1" you can see that the dropdown window is on full width correctly, but when I go on product pages "Screenshoot 2", it changes the width. I tried everything but I'm still not able to make it right.

This is the code I'm using to make the nested dropdown menu works:

<style>
.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;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}

</style>

<script>
(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);

</script>

I've been following this tutorial by divi official website:
https://www.elegantthemes.com/blog/...llapsing-nested-menu-with-divis-theme-builder

Any help is super appreciated

Thank you very much

Simone

 

It worked! Thank you very much!

May I ask you why it did? Im curious

Thank you again!

Simone