Mobile Hamburger Menu & Sticky Header Opacity

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)

you mean the whole with overlay of content?
Or only the solution that hamburger works in all cases?

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;
}
}