Changing mobile menu dropdown area z-index

Hi all!

Is it possible to “lower” the z-index of the plugin’s mobile menu dropdown area? I currently use the Max Mega Menu plugin with Elementor free, on a custom header created by me.
Here’s the header’s additional code with Elementor’s html widget:

<div class=”header”></div>
<style>
.header {
position: fixed;
z-index: 9999;
height: 300px;
background-image: url(‘the background image url’);
background-repeat: no-repeat;
background-position: -630px -320px;
-webkit-transition: all ease-out .8s;
-moz-transition: all ease-out .8s;
-o-transition: all ease-out .8s;
transition: all ease-out .8s;
}
</style>

I tried to adjust the z-index of the Max Mega Menu in the “Custom Styling” option with the following code snippet, but with no result:

@media only screen and (max-width: 960px) {
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
position: absolute; /* i’ve tried fixed as well*/
z-index: -1; /* i’ve tried many lower values than 9999, but unfortunately nothing happened, the dropdown opens on top of the header background image. Hovewer, when I add “background-color: red;” in this section, it functions perfectly, so the dropdown menu background becomes red…*/
}
}

My goal would be: (in descending layer order) burger icon > header background image > menu dropdown > page content > page background image

Is it possible somehow?

Thank you in advance,
Oliver