you have to create a folder in your child-theme folder – call it “shortcodes”
put in the columns.php of josue in that folder and
place this to your child-theme functions.php:

add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths)
{
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

ok – so geht es ja jetzt

PPS:

setze mal in quick css:

#mobile-advanced {
    background-image: url("http://ahlers-vogel1.x-production.com/wp-content/uploads/2016/10/Ahlers-Vogel_Logo.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 40% auto;
    padding: 10% 0 !important;
}

und schau dann in das mobile menu rein
eventuell nimmt man da auf Grund deines grauen Hintergrundes ein anderes Logo ( ganz Weiss vielleicht oder composite)

your welcome

immer genau lesen – ich war ja von den Einstellung individuelle höhe und kein Abstand ausgegangen – bei dir ist es jetzt:

#top .av_one_fifth {
    width: 18%;
}

@media only screen and (min-width: 480px) and (max-width: 990px) {
#top .av_one_fifth {
    clear: none !important;
    width: 48% !important;
}
#top .av_one_fifth:nth-child(2n+1) {
    clear: both !important;
}
}

die no-margin anweisung ist auch dann hinfällig gewesen weil du ein top-margin definiertest.

was ich mit Einstellungen meine: die erste 1/5 tell Spalte bestimmt das Verhalten der 4 nachfolgenden. Wenn du jetzt von einem 4 Spalter auf einen 5 Spalter wechselst, springen die 1. Elemente der folgenden Reihen als 5. Element eine Reihe höher. Und das ursprünglich 2. 1/5tel springt auf den ersten Platz. Diese Columns sind aber per default auf equal height und space eingestellt. Daher musst du beim Ändern auf 5 Spalter alle ersten Spalten die Einstellungen dort prüfen.

can you give me a link too – i’m participant as you but with over 1600 postings a bit skilled for enfold.
on your own site i can’t find some difficulties.

bei 5 er columns geht es ähnlich
wie gesagt ich habe mal auf der Testseite das so angelegt : 1/5 dann individuelle Höhe (sonst ist das auf display: table-cell) und keine Zwischenräume (die lege ich selbst fest.

dann :

#top .no_margin.av_one_fifth {
    width: 18%;
}
#top div .no_margin {
    margin-left: 2% !important;
    margin-top: 0;
}

@media only screen and (min-width: 480px) and (max-width: 990px) {
#top .no_margin.av_one_fifth {
    clear: none !important;
    width: 48% !important;
}
#top .no_margin.av_one_fifth:nth-child(2n+1) {
    clear: both !important;
}
}

mit den Abständen kannst du ja was spielen.
wichtig ist eben: kein clearing über die columns bis auf (2n+1)

das ist noch nicht ganz perfekt, weil da jetzt links rechts ein anderer Abstand ist.
man könnte dann für #top .no_margin.av_one_fifth.first was setzen etc. – aber so sieht es auch schon besser aus

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');