with the changes above it will be:
( click to enlarge )

for example you can change those lines to :

if( ! empty( $link ) )
{
	$linktitle = $title;

	switch( $linkelement )
	{
		case 'both':
			if( $title ) 
			{
				$title = "<a href='{$link}' title='Link to " . esc_attr( $linktitle ) . "' $blank>$linktitle</a>";
			}
			
			$display_char_wrapper['start'] = "a href='{$link}' title='Iconlink to "  . esc_attr($linktitle) . "' {$blank}";
			$display_char_wrapper['end'] = 'a';
			break;
		case 'only_icon':
			$display_char_wrapper['start'] = "a href='{$link}' title='Iconlink to " . esc_attr($linktitle) . "' {$blank}";
			$display_char_wrapper['end'] = 'a';
			break;
		default:
			if( $title ) 
			{
				$title = "<a href='{$link}' title='Link to " . esc_attr( $linktitle ) . "' {$blank} >$linktitle</a>";
			}
			
			$display_char_wrapper['start'] = 'div';
			$display_char_wrapper['end'] = 'div';
			break;
	}
}

see results here on those two iconboxes on the right: https://webers-testseite.de/tagood/

this is the layout i used for it:
( click to enlarge )

here is the css code for it in quick css:
( in my case it is that page-id – adjust to your page-id )

#top.page-id-40318 #main {
  overflow-x: hidden;
  height: 100vh;
}

#top.page-id-40318 .avia-section.xeovision {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex !important;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.2em;
    color: white;
    background-size: cover !important;
    background-position: center !important;
}

/*** and everything that follows the xeovision section  f.e.: a grid-row (.av-layout-grid-container) ***/
#top.page-id-40318 .avia-section:not(.xeovision) {
    position: relative; 
}

@xeovision: fixed: the element is removed from the flow of the document like absolutely positioned elements. In fact they behave almost the same, only fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling.
I think that you will not succeed with a fixed section. However, it would be better to see your page live where you tried it. I can then rather give advice on how it might be done.
However, it may be enough as it is here: https://webers-testseite.de/xeovision/
but for a transparent color-section following – the top section had to be 100% screen-height. (100vh)

Or more tricky : background image to html ;)
and transparencies where ever you like : https://webers-testseite.de/xeovision2/

the calculation of the height is on shortcodes.js on line 285ff:

_fetch_properties: function()
{
	this.property.offset 	= this.$parent.offset().top;
	this.property.wh 		= this.$win.height();
	this.property.height 	= this.$parent.outerHeight();
	
	//set the height of the element based on the windows height, offset ratio and parent height
	this.$el.height(Math.ceil((this.property.wh * this.ratio) + this.property.height));
	
	//re-position the element
	this._parallax_scroll();
},

you see that the scroll ratio comes into account.
If your scroll ratio will be less than the default 0.5 the height will result in a less height.
you can influence the scroll speed by this snippet in child-theme functions.php:

add_filter('avf_parallax_speed','avia_change_parallax_ratio', 10, 2);
function avia_change_parallax_ratio($ratio, $id){
$ratio = "0.2";
return $ratio;
}

but then the parallax effect is less impressiv – but the background-images won’t be cropped as much as a 0.5 ratio will do.
There is one more thing to clarify where is the influence of the scroll offset and wouldn’t it make sense to include the height of the header in the calculation if it is fixed.
I use a fixed header quite gladly, and also already times with 150px height and more. So such an image would not have to have height.
this.$el.height(Math.ceil((this.property.wh * this.ratio) + this.property.height));

Leider kein Private Content für mich. Bin selbst hier nur Teilnehmer.
Kannst mir aber gerne ne E-Mail schicken. Infos unter meinem Nick oder Avatar.

PS: bislang sehe ich keine Änderung. Der erste Aufruf der Seite – ohne auf das popup unten zu reagieren! – Seite mit Developer Tools gecheckt!
Analytics immer noch aktiv. Ein OptOut ist nicht zulässig!
Sonst habe ich ja Borlabs Cookies am Start, aber es geht auch mit Enfold: https://webers-testseite.de/weber/
Du musst da auswählen:

If you want to keep the aspect ratio, the height determines the enlargement factor if you are using landscape images.
Therefore, I recommend using a different image in portrait format than in landscape format.This avoids that important content is cut off.
________
Wenn du die Seitenverhältnisse beibehalten willst, bestimmt die meist die Höhe eines Querformatbildes den Vergrößerungsfaktor.
Daher empfehle ich dann im Hochformat ein anderes Bild einzusetzen als im Querformat. Hierdurch wird vermieden, dass Bildwichtige Inhalte beschnitten werden.

there are two if clauses to add. I told you above that the svg attribute of preserveAspectRatio decides how the svg react on shrinking.
so if your logo is on the right side ( a class exists on html : html_logo_right – and if the logo is centered it has on html the class: html_logo_center
so code of changing all img svgs goes to inline-svgs has two check if img is a logo img and if html got this class – and change that attribute:

// replace every svg with its inline code
function replace_img_if_svg_with_inline_svg() {
?>
<script type="text/javascript">
(function($) {
  $('img').filter(function() { return this.src.match(/.*\.svg$/); }).each(function(){
    var imgSVG    = $(this);
    var imgURL    = $(this).attr('src');
    var imgAlt    = $(this).attr('alt');
    var imgTitle  = $(this).attr('title');
    var imgClass  = $(this).attr('class');
    $.get(imgURL, function(data) {
		var svg = $(data).find('svg');
		// Remove invalid XML tags
		svg = svg.removeAttr('xmlns xmlns:xlink');
		// add replaced image's alt tag to the inline SVG
		typeof imgAlt === 'undefined' || imgAlt === '' ?  (svg = svg.attr('alt', 'Replaced Image')) : (svg = svg.attr('alt', imgAlt)) ;
		// add replaced image's Title tag to the inline SVG
		typeof imgTitle === 'undefined' || imgTitle === '' ? (svg = svg.attr('title', 'A SVG Image replaced by its inline code')) : (svg = svg.attr('title', imgTitle));
		// Add replaced image's classes to the new SVG and add replaced-svg as new class
		typeof imgClass === 'undefined' || imgClass === '' ? (svg = svg.attr('class', 'replaced-svg')) : (svg = svg.attr('class', imgClass+' replaced-svg'));
		// check where the logo is placed : left or right or centered in the header
		if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_left')) {
			svg.attr('preserveAspectRatio', 'xMinYMin meet');
		};
		if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_right')) {
			svg.attr('preserveAspectRatio', 'xMaxYMin meet');
		};
		if ($(imgSVG).parents('.logo').length && $('html').hasClass('html_logo_center')) {
			svg.attr('preserveAspectRatio', 'xMidYMin meet');
		};
		// Replace image with inline SVG Code
      	imgSVG.replaceWith(svg);
    }, 'xml');
});
})(jQuery);
</script>
<?php
}	
add_action('wp_footer', 'replace_img_if_svg_with_inline_svg');

you can see here on my test-page that if the logo is on the right – it shrinks to the right:
https://webers-testseite.de/impressum/datenschutzerklaerung/
here is the css code for “nearly” all instances ( header left, center, right with transparency or not ):

.logo, .logo a {
  overflow: visible;
}

.logo a {
  display: flex;
}

#top .logo svg {
  position: relative;
  left: 0;
  top: 0;
  width: 450px;
}

#top .logo .subtext svg {
    position: absolute;
}

.html_logo_right #top .logo svg {
  left: auto;
  right: 0;
}

.html_logo_center #top .logo > svg {
  -webkit-transform: translateX(-50%);  
  transform: translateX(-50%);
}

#top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
    filter: alpha(opacity=0);
}

#top :not(.av_header_transparency).av_alternate_logo_active .logo .subtext svg {
    opacity: 0;
    filter: alpha(opacity=0);
}

.av_header_transparency .logo .subtext svg {
    opacity: 1; 
}

Edit – the menu is very nice – i now see that the first sublevel Links goes under the main navigation ( mybe that is the reason for the middle positioning)
wow. that will be hard to reach with enfold only options and css.

on website opening in a lightbox the ?iframe=true is ok. See: https://webers-testseite.de/my-website/
For images as Yigit said it is not necessary.
( you can see that on enfold/js/avia-snippet-lightbox.js on line 207ff)
the groups and autolink elements do open in lightbox without any addons.

A few things to keep in mind:
If both the logo and the logo for the transparencies is an inline svg

.logo, .logo a {
  overflow: visible;
}
.logo svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 450px    /*** an absolute value might be necessary for best browser support  ***/
}
#top :not(.av_header_transparency).av_alternate_logo_active .logo .subtext svg {
 opacity:0;
 filter:alpha(opacity=0)
}

the svg code inside in the head section :

<svg alt="transparent Logo Webers Webdesign" title="Webers Webdesign" version="1.1" id="Webdesign-transparent"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
x="0px" y="0px" width="100%" height="100%" viewBox="0 0 570 200" 
preserveAspectRatio="xMinYMid meet" xml:space="preserve">

• if width and height is set it will be responsive to the surrounding container.
• the preserveAspectRatio setting determines the way the svg shrinks with its surrounding container (xMinYMid – means it shrinks to the left side but stays in the middle on y-Achsis)

if this is the fact – you do not need to set different display options for the .logo and .logo a
see here: https://webers-testseite.de/

you can use this snippet in child-theme functions.php to place an svg inline instead of the existing img:

// insert svg as logo
function replace_logo_with_svg() {
?>
  <script type="text/javascript">
  (function($) {
    function a() {
      $( ".logo a img" ).remove();
      $.get('/wp-content/uploads/YOUR-LOGO.svg', function(svg){
        $( ".logo a" ).html( svg );
      }, 'text');
    }
    a();
  })(jQuery);
  </script>
<?php
}
add_action('wp_footer', 'replace_logo_with_svg');

I use svg support too – but to replace the logo via the “force replace” of that plugin might be to slow
if you want that only on special pages – you can use if clauses

you need to set some absolute width to the inlins svg logo – and for shrinking headers the display options had to be changed.
f.e.:

.logo svg {
  width: 450px;
}
.logo a {
  display: flex;
  position: relative;
}

I like in particular the navigation, which creates a top level menu item in which omitted menu items are collected as a submenu. Only when it no longer works, the hamburger is offered as an alternative menu.

You see here: https://kriesi.at/support/topic/make-all-mega-menu-images-the-same-size/#post-1305031 that the space for calculating how many list points are next to each other is only made for the row. I assume that the classe at the mega-div itself depends on the maximum value of columns.
In a row, the list points then have a class that determines how many columns are next to each other.
So if you decide to start a new row – this code will work for the most circumstances.