Burger Menu / Mobile Menu / unconsistancy

hm – if this will be nice enough for you – it is only css styling of new burger menu.
And with media-querries it works on all devices without falling back to old mobile advanced menu

Test Page

Result here: Link

/**** not showing the normal menu nor the old responsive menu  ******/
.js_active.html_burger_menu #avia-menu > li {display: none }
#advanced_menu_toggle {display: none !important }

/**** just to have a bit more width for both - logo and toggler  ******/
.responsive #top #wrap_all .container {
    max-width: 95%;
    width: 95%;
}

/**** styling the burger menu   ******/
.av-burger-overlay {
    box-shadow: -2px 0 10px #bbb; 
    left: auto;   
    max-width: 400px;   
}

/**** one example to place icons infront of hamburger menu links  ******/
#av-burger-menu-ul li#menu-item-437 a .avia-menu-text::before {
content: "\e821 \00a0";
font-family: entypo-fontello; 
color: #0088BD}

/**** background image to hamburger menu  ******/
.av-burger-overlay-inner {
background: url("/wp-content/uploads/burger-bg.jpg") no-repeat scroll 0 0 / cover ; 
}

/**** background-color for hamburger menu icon  ******/
.av-burger-overlay-active #top .av-hamburger-inner, 
.av-burger-overlay-active #top .av-hamburger-inner::before, 
.av-burger-overlay-active #top .av-hamburger-inner::after    {
background-color: #000 !important;
}

/**** search icon color in burger menu   ******/
.av-burger-overlay-active #top #wrap_all #menu-item-search a, 
.av-burger-overlay-active #top #wrap_all #menu-item-search a:hover {
    color: #000;
}

/**** burger menu font color   ******/
#av-burger-menu-ul li a {
    color: #000 !important;
}

/**** burger menu text shadow - if you like  ******/
#av-burger-menu-ul li a .avia-menu-text {
    text-shadow: 1px 1px 3px #333;
}

/**** burger menu hover state  ******/
#av-burger-menu-ul li a:hover .avia-menu-text {
    color: #0088BD;
    font-weight: 400;
}

Only needed if your burger menu is not 100% width –
for the styling of the page if burger menu is active you have to make a copy of header.php to your child-theme folder:
look for <div id='wrap_all'> and place just after it : <div class='mega-bg'></div> so that there is :

<div id='wrap_all'>
<div class='mega-bg'></div>

/**** setting up an effect on burger menu active - you have to insert the code above to header.php for that ******/

 .mega-bg {
    width:100%;
    height:500%;
    position:absolute;
    display:none;
    z-index:0;
    transition: all 1s linear 0;
    opacity: 0
    }  

 .av-burger-overlay-active .mega-bg {
    width:100%;
    height:500%;
    background:#fff;
    position:absolute;
    display:block;
    z-index:500;
    transition: all 1s linear 0;
    zoom: 1;
    filter: alpha(opacity=85);
    opacity: 0.85;
    }