hast du eine seite wo auch 5 sind?

what is the thing you like to have? 2 2 1 or maybe 1 2 2 (1 in center above)
the thing is here to work with nth:child options and clearings

is there a link for a participant as me?

a bit offtopic but in the same direction:
Wordpress itself got an image quality tool – this is in a good meaning but if the image creator knows his job excellent sometimes the 90% jpg is bad quality but more space. To avoid this from wp induced process add this to functions.php child-theme:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

on svg you can open the svg file in a good text editor (sublime text on Mac OSX or notepad++ on PC)

on top of your svg there is some code like this:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="110 33 400 120" enable-background="new 110 33 400 120"  xml:space="preserve">

you can manually enter : preserveAspectRatio=”xMinYMin meet” (just before xml:space so there is:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="110 33 400 120" enable-background="new 110 33 400 120" preserveAspectRatio="xMinYMin meet" xml:space="preserve">

this code offers you the influence how the svg shrinks. xMinYMin means it goes to the top left corner
if you like to center the logo in x-direction : xMidYMin means it centers on shrinking in x-direction but it goes to top etc
xMaxYMax – goes to right bottom corner of the surrounding container.

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: