correct the padding-top of #main

how to influence the lightbox size itself:

.mfp-image-holder .mfp-content {
    max-width: 80vw;
}

how to avoid downscaling when column only can show a scaled version of an image ( not the lightbox )
you can not avoid scaling on responsive case – you only can hope that an image in the srcset fits best to the given space for it.
But you can create your own image-size for best fitting on non responsive case.
…
filter: image_size_names_choose

add_image_size( 'new-size', 2000, 500, true );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'new-size' => __( 'New Size' ),
    ) );
}
add_filter( 'image_size_names_choose', 'my_custom_sizes' );

Das CSS ist kein Hexenwerk, wenn man sich mal mit den Browser eigenen Developer Tools beschäftigt (nahezu alle bringen da mehr oder weniger gute mit – bei Safari muss man das in den Einstellungen allerdings aktivieren).
siehe mal hier mein Kommentar unten: https://kriesi.at/support/topic/arrange-to-middle/#post-1094963

Da kann man ganz gut vergleichen was an Klassen zB an einem aktivem Menu Punkt anliegt.

Man kann dort “virtuell” css code einfügen, und die Veränderung beobachten – bevor man es überhaupt in das Quick CSS einfügt.

“The video itself actually contains the black bars or space. ”

so re-render your film : https://webers-testseite.de/wp-content/uploads/testbackground.mp4
this is than 16/9 Format.
and give to the color-section : “Custom-height in % …” : 56%
See: https://webers-testseite.de/fullvideo-background/

ja – ist eben leider so, dass es ohne die Seite schwer ist den genauen Code zu generieren. Du siehst allein anhand des vorhandenen Codes von Enfold , dass hier genau geschaut werden muss welche Ebene des Menus nun angesprochen werden soll – die
.av-burger-overlay li a, .av-burger-overlay li li a, .av-burger-overlay li li li a Cascaden sprechen dort mit hinein.

maybe this could be a good alternative : not to have the overlay hamburger on top but shifted that amount of header height downwards:

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
  .av-burger-overlay, 
  .av-burger-overlay-bg {
    top:91px
  }
  
  .html_av-overlay-side-classic #av-burger-menu-ul {
    padding: 0 0 100px !important;
  }
  
  .responsive.html_header_transparency.av-burger-overlay-active #header.av_header_transparency #avia-menu a {
    color:#fff !important;
  }

  .html_av-overlay-side.av-burger-overlay-active #top .av_header_transparency .av-hamburger-inner,
  .html_av-overlay-side.av-burger-overlay-active #top .av_header_transparency .av-hamburger-inner::before,
  .html_av-overlay-side.av-burger-overlay-active #top .av_header_transparency .av-hamburger-inner::after {
   background-color: #fff 
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
  .responsive #top #main {
    padding-top: 80px !important;    /*** play with that - depends on your header-height ***/
  }
  #top .av_header_transparency .header_bg {
    background-color: #FFF;
  }
  .av-burger-overlay, 
  .av-burger-overlay-bg {
    top:81px
  }
  .html_av-overlay-side-classic #av-burger-menu-ul {
    padding: 0 0 100px !important;
  }
}

looks this way on opened hamburger between 768px and 989px

but that header he could have in fixed position on top.

can you try this in quick css:

depends on your burger-menu break point ( when burger is shown – on the demo page 2017 it is at 990px )

@media only screen and (min-width: 768px) and (max-width: 989px) {
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }
}

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }
  .responsive #top #main {
    padding-top: 80px !important;    /*** play with that - depends on your header-height ***/
  }
  #top .av_header_transparency .header_bg {
    background-color: #FFF;
  }
}

there is one thing to know the parent of that sub-menu link got the same class: current-menu-item
but it has an additonal one of active-parent-item so you had to exclude this parent from being influenced too:

#av-burger-menu-ul :not(.active-parent-item) .current-menu-item > a {
    color: red !important;
}

better would be to see your page – because sometimes there are second-, third-, fourth-level sub-menu items .

Hi Mike – what do you mean by:

If you are using the newest child theme included with v4.7.3 then this code is already included

The child theme i can download has no entry in the child-theme functions.php and in 4.7.3 i can not find an analog loading –
so I think it’s still necessary to activate it with the snippet from above.

And may i ask for what the if clause is here in your code – i allways use this without:

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

HELLO MIKE : please change your image-hoster – it is horrible

popups and other nefarious sites as they all open up – not always – but more and more often. Also the Kriesi page will be closed etc. pp.
Please!

________

On Ismaels code i see there was a little inconsitency: if there is a color-section with background-image on top – like here f.e:
https://kriesi.at/themes/enfold-2017/blog/blog-single-author-small/ his code will end in a colorized top color-section too:
So we can use an attribute selector – only if there was no background-image on container.wrap the code will do the job:

@media only screen and (min-width: 768px) {
  .container_wrap.sidebar_right:not([style*="background-image"]):before {
      content: '';
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      background: #ddd;
      height: 100%;
      width: calc(30%);
  }
}

if you got sidebar left the change it to: .container_wrap.sidebar_left.

ja so ist es beschrieben oben:

du legst dir eine Kopie dieser Datei in den child-theme/js/ Ordner ( der ist per se nicht unbedingt da, dann leg ihn an)

durch das Snippet bindest du dann über das child-theme diese Datei statt der parent datei ein.
So bist du einigermaßen sicher beim nächsten Eltern-update. Sollte sich aber mal was in der avia_google_maps_api.js ändern – siehst du wenigstens der Kommentare wegen, was sich geändert hatte und du kannst dann anhand dessen die neue Datei wieder bearbeiten.

no private Data for me – you have to wait til mods are here. I’m participant as you.

Du kannst hier einen immer noch aktuellen Lösungsansatz finden: https://kriesi.at/support/topic/one-google-map-marker-tooltip-at-a-time/#post-932107

Mittlerweile wird die avia_google_maps_api.js conditional geladen. Heißt nur im Bedarfsfall. Macht es aber einfacher, dieses als child-theme script zu laden. ( Please dear mods – if this enqueue code could be optimized – tell us)
Das hier kommt also in die child-theme functions.php:

add_action( 'wp_enqueue_scripts', 'wp_change_google_maps_script', 100 );
function wp_change_google_maps_script() {
  wp_deregister_script( 'avia_google_maps_api_script' );
  wp_enqueue_script( 'avia_child_google_maps_api_script', get_stylesheet_directory_uri().'/js/avia_google_maps_api.js', array('jquery'), $vn, true );
}

du legst dir eine Kopie dieser Datei in den child-theme/js/ Ordner ( der ist per se nicht unbedingt da, dann leg ihn an)

Diese Kopie bearbeitest du entsprechend dem Link oben ( bitte beachte den Eintrag ganz oben – das vergessen viele)

ODER : Auf Grundlage von enfold 4.7.3
oder hier sehen: https://pastebin.com/9vUQrcFD
hier downloaden: https://pastebin.com/dl/9vUQrcFD
Ich habe Kommentare mit hineingeschrieben, damit du dich erinnerst was passiert ist.

Auch wenn du nur irgendwo auf die Karte klickst gehen die InfoWindows zu.
https://webers-testseite.de/google-maps-infowindow/

_______________________________

English Part for the interested other Participants:

You can find a still up-to-date solution here: https://kriesi.at/support/topic/one-google-map-marker-tooltip-at-a-time/#post-932107

Meanwhile the avia_google_maps_api.js is loaded conditionally. This means only if required. But makes it easier to load it as child-theme script. ( Please dear mods – if this enqueue code could be optimized – tell us )
So this one goes into the child-theme functions.php:

add_action( 'wp_enqueue_scripts', 'wp_change_google_maps_script', 100 );
function wp_change_google_maps_script() {
  wp_deregister_script( 'avia_google_maps_api_script' );
  wp_enqueue_script( 'avia_child_google_maps_api_script', get_stylesheet_directory_uri().'/js/avia_google_maps_api.js', array('jquery'), $vn, true );
}

you put a copy of these files in the child-theme/js/ folder (it is not necessarily there per se, then create it)

Edit this copy according to the link (please note the entry at the top of the page – many people forget this)

On the basis of enfold 4.7.3
or see here: https://pastebin.com/9vUQrcFD
download here: https://pastebin.com/dl/9vUQrcFD
I’ve included comments so you’ll remember what happened.

Even if you just click somewhere on the canvas the InfoWindows will close.
https://webers-testseite.de/google-maps-infowindow/

thats an important additional information – that you have transparency header!
Anyway – it will be better to have your page to give you better advice

you see here a test page with transparency header – you can even style the background-colors on the same toggle class:https://webers-testseite.de/elegant/con-tact/