Mobile dropdown menu icon (X) disappears when trying to open

Hi

I've been battling the issue that is causing the mobile and tablet dropdown menu icon disappearing (it looks like is sliding to the right outside the screen view)

Could you please assist me with finding the solution.

My website https://bellari.co.nz/

I have also using this CSS code

#main-header.close {
visibility: visible!important;
top: 0!important;
}
.et_header_style_left #logo {
float: left;
margin-top: 18px;
}
#et-top-navigation {
float: right;
padding: 10px 30px 0 0!important;
}
#mycustomtable.table-responsive {
overflow-x: visible !important;
overflow-y: visible !important;
}
.et_mobile_menu {
/* background is white by default */
background-color:#3f404c !important;
border: 1px solid #ff611d;
border-radius: 10px;
}
@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header {
position: fixed;
background: #3f404c ;
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
.et_mobile_menu {
overflow: scroll !important;
max-height: 83vh;
}
/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";
}