For the overlay we need a container surrounding the whole thing which could be adressed well.
So best will be to make a copy of header.php in the child-theme folder.
Open it and insert that new container just after the opening wrap_all container to have than:

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

so we can have than in quick css :

 .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=80);
    opacity: 0.8;
    }

you see here that mega-bg container is just a “super container ” and in normal mode with opacity zero !
when hamburger menu opens there is an extra class : .av-burger-overlay-active.
we can now use this to change opacity and background-color (you can use here every color you like even#000)

here is the rest with some comments:

/******** some logo adjustments *************/

.main_menu .avia-menu,#header_main_alternate,.fallback_menu {
display:block;
float:right;
}

.responsive #top #wrap_all .container {
max-width:95%;
width:95%;
}

.responsive #top #wrap_all #header {
background-color:#fff;
opacity:1;
position:fixed;
width:100%;
}

.responsive #top .logo {
float:left;
position:absolute;
top:50%!important;
transform:translateY(-50%);
width:65%;
}

#menu-item-burger > a {
padding-right:8px!important;
}

#advanced_menu_toggle {
display:none!important;
}

/******** if you like to have infront of your menu-items some icons. *************/

#av-burger-menu-ul li#menu-item-437 a .avia-menu-text::before {content: "\e821 \00a0";font-family: entypo-fontello; color: #0088BD}
#av-burger-menu-ul li#menu-item-438 a .avia-menu-text::before {content: "\e83c \00a0";font-family: entypo-fontello; color: #0088BD}
#av-burger-menu-ul li#menu-item-439 a .avia-menu-text::before {content: "\e857 \00a0";font-family: entypo-fontello; color: #0088BD}
#av-burger-menu-ul li#menu-item-440 a .avia-menu-text::before {content: "\e80b \00a0";font-family: entypo-fontello; color: #0088BD}
#av-burger-menu-ul li#menu-item-441 a .avia-menu-text::before {content: "\e805 \00a0";font-family: entypo-fontello; color: #0088BD}
#av-burger-menu-ul li#menu-item-589 a .avia-menu-text::before {content: "\e80e \00a0";font-family: entypo-fontello; color: #0088BD}
#av-burger-menu-ul li#menu-item-703 a .avia-menu-text::before {content: "\e81e \00a0";font-family: entypo-fontello; color: #0088BD}

/********. some changings of hamburger menu.  **********/

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

.av-burger-overlay-inner {
    background: #fff url("url to a background image") no-repeat scroll 0 0 / cover ; 
}

.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: #0088BD !important;
}

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

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

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

/******** if you don't like to have fullscreen hamburger active menu when under a given screenwidth *************/
			
@media only screen and (max-width: 880px) {
    .av-burger-overlay {
    box-shadow: none;
    left: 0 !important;
    max-width: 100% !important;
}
}

hm – i thought he liked to have the hamburger menu for both cases : wide screens and in responsive case

this is possible : see here Link
make the browser window smaller and see that hamburger is allways in action.
(There are some other changings on Hamburger here too – (not 100% width etc – overlay of content etc)

i need more input.
you have choosen the sticky header on Enfold Options Dialog – and now ?

the sticky option is a globaly one – so how do you get pages with and some without sticky behavior?

well i think the code snippet above should only do the job for admin area – dashboard media preview.
btw. there is a spacebar missing between td and . media-icon.
but i think the code could be a bit changed to:

function fix_svg_thumb_display() {
echo '<style type="text/css">

    td .media-icon img[src$=".svg"] { 
      width: 100% !important; 
      height: auto !important; 
    }

</style>';
}
add_action('admin_head', 'fix_svg_thumb_display');

showing the svg attachment isn’t the backend site it is in frontend (wp_head influenced)

function fix_svg_attachment_display() {
echo '<style type="text/css">

    .attachment img[src$=".svg"] { 
      width: 100% !important; 
      height: auto !important; 
    }

</style>';
}
add_action('wp_head', 'fix_svg_attachment_display');

why instead
try a:hover:before

btw: very nice logo !

you have allways to set a width (or heights) rule for svgs – otherwise WP will give them a 1px size!

f.e.

.logo img {
width: 350px;
height: auto
}

the reason why it works on responsive case is that on that moment the logo gets a size rule from enfold theme settings.

have you got a link to your site?

or maybe better:

function avia_custom_mobile_logo(){
if(wp_is_mobile()){
?>
 <script>
jQuery(".logo img").attr("src", "http://kriesi.at/wp-content/themes/kriesi/images/logo.png")
 </script>
<?php
}
}
add_action('wp_footer', 'avia_custom_mobile_logo');

there is a screenwidth range when the social buttons are under advanced menu button – thats why i mentioned that you should correct it:

you can find here http://kriesi.at/documentation/enfold/code-snippets/ some code snippets to influence sort options globaly. But this above you can decide eachtime you generate a new alb element.

yes you can – place the given shortcode into a text alb element.
But you have to think of the smaller canvas. it is not possible to insert f.e. a layerslider created for 1210px width to it.
Create a new one (could be responsive) but with less canvas size – see example – allthough i created a layerslider only with canvas size 320px on smaller screens when columns go to 1/1 it is bigger caused by responsiveness.
https://webers-testseite.de/kokon/layerslider-in-column/

PS : you find the shortcode in Layerslider options dialog nearby the “save changes” button

be careful it replaces it on category view
if you have single post with that category you have to take a different conditional tag

try than with has_category(‘music’)

btw – i think if you only set the parameter to has_category the is_category is included

i see it works !

or you do this (might be more browser-support)

.page-id-893 a.slide-image {
    background-color: transparent !important;
}

by the way it seems to be a good idea to let the advanced menu let come a bit sooner than under 768px

for example (you have to play a bit with 920px up and down to see what you need)

@media only screen and (max-width: 920px) {
  .container #advanced_menu_toggle, #advanced_menu_hide {
      display: block;
  }
.main_menu .avia-menu, #header_main_alternate, .fallback_menu {
    display: none;
}
}

and you are a lucky guy because it is under 990px so on landscape ipad or tablets you have your normal nav !