you can see here an example on using that shortcode including the existing classes from enfold to handle a hamburger menu – if you look to the DOM – it is very nearby the setup from : https://jonsuh.com/hamburgers/
because all scripts are allready implemented to enfold – you have to find a way how to insert that DOM Structure

<button class="hamburger hamburger--collapse" type="button">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

but try to find a plugin ( yes the good ones are not free) that handles the hamburger insertion with a given WordPress menu.

or a little more choice:

<?php
function custom_named_menu_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'name' => '', // Default to an empty menu name
        'class' => 'custom-menu', // Default CSS class
        'depth' => 0, // Default depth (0 for unlimited)
    ), $atts ) );

    if ( ! empty( $name ) ) {
        return wp_nav_menu( array(
            'menu'            => $name,
            'menu_class'      => $class,
            'container'       => 'nav', // You can change this to 'div', false, etc.
            'container_class' => $class . '-container',
            'echo'            => false, // Important: returns the menu HTML instead of printing it
            'depth'           => $depth,
        ) );
    }
    return ''; // Return empty if no menu name is provided
}
add_shortcode( 'named_menu', 'custom_named_menu_shortcode' );
?>

and use the shortcode like that: [named_menu name="your-menu-name" class="my-custom-menu" depth="2"]

hail brave new AI world

New snippet
see in Action here: https://webers-testseite.de/impressum/

it is a draggable Window:

this is for child-theme functions.php:

see code here on paste bin: https://pastebin.com/zc4fvX1w

because of a innerHtml (lines 158-176) it is not possible to post it here – (maybe mod knows how)

and here is the style for quick css

/* --- Draggable Search Window --- */
#gcmSearchUIContainer { /* Changed ID for clarity */
  position: fixed;
  top: 100px; /* Initial position from the top */
  left: 50%;  /* Start horizontally centered */
  transform: translateX(-50%); /* Adjust for true centering */
  width: 380px; /* A suitable width for a small window */
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.25);
  z-index: 100001; /* Ensure it's on top, slightly higher than before if needed */
  overflow: hidden; /* To contain rounded corners with header */
}

#gcmSearchUIContainer.hidden {
  display: none;
}

#gcmSearchUIHeader {
  padding: 10px 15px;
  background-color: #e8e8e8;
  border-bottom: 1px solid #ccc;
  cursor: move; /* Indicates this area is draggable */
  border-top-left-radius: 8px; /* Match container's radius */
  border-top-right-radius: 8px; /* Match container's radius */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#gcmSearchUIHeader .gcm-title {
  font-weight: bold;
  font-size: 1.1em;
  color: #333;
}

#gcmSearchUIHeader #gcmCloseSearchBtnDraggable { /* Specific ID for close button in this context */
  background: none;
  border: none;
  font-size: 1.3em;
  font-weight: bold;
  color: #777;
  cursor: pointer;
  padding: 0 5px;
}
#gcmSearchUIHeader #gcmCloseSearchBtnDraggable:hover {
  color: #000;
}

#gcmSearchUIBody {
  padding: 15px;
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  gap: 10px; /* Space between elements in the body */
}

#gcmSearchUIBody #gcmSearchInputDraggable { /* Specific ID for input */
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

#gcmSearchUIBody .gcm-controls-row {
  display: flex;
  justify-content: space-between; /* Space out controls */
  align-items: center;
  gap: 8px; /* Space between buttons in a row */
}

#gcmSearchUIBody .gcm-navigation {
    display: flex;
    gap: 5px;
}

#gcmSearchUIBody button {
  padding: 8px 12px;
  border: 1px solid #aaa;
  border-radius: 4px;
  background-color: #e7e7e7;
  cursor: pointer;
  min-width: 40px; /* For Next/Prev buttons */
  text-align: center;
}

#gcmSearchUIBody button:hover {
  background-color: #d7d7d7;
}

#gcmSearchUIBody #gcmSearchBtnDraggable { /* Specific ID */
    flex-grow: 1; /* Allow Find button to take more space if needed */
}

#gcmSearchUIBody .gcm-results-count-draggable { /* Specific ID */
  font-size: 0.95em;
  color: #333;
  white-space: nowrap; /* Prevent wrapping */
}

/* --- Highlighting Styles (remain the same) --- */
.custom-highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
}

.custom-highlight.current-custom-highlight {
  background-color: orange;
  outline: 1px solid red;
}

Do not forget to remove the leading php on that downloaded snippet before you insert it to your child-theme functions.php

Download: https://pastebin.com/dl/zc4fvX1w

Directly and reliably opening the browser’s own “Search in page” dialog (typically activated by Ctrl+F or Cmd+F) via an HTML button is generally not possible due to security restrictions and the lack of a standardized web API.

Yes, I also recognised that from many of the buttons.

temporarily until the problem is fixed:

#top .avia-button .avia_loading_icon {
  display: none !important;
}

But you do not use it now?

See first if this is a nearby solution: https://enfold.webers-webdesign.de/

ok – here is a quick solution (with AI support).
Enfold has the hook where you can insert something directly after the body opening tag. So put this to your child-theme functions.php:

function ava_custom_jalousie_loader() {
?>
<script type="text/javascript">
	window.addEventListener('load', function() {
		document.body.classList.add('loaded');
	});
</script>
<?php
}
add_action( 'wp_footer', 'ava_custom_jalousie_loader' );

add_action('ava_after_body_opening_tag', function() {
  echo '<div id="preloader-wrapper">';
    echo '<div id="jalousie-preloader">';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
		echo '<div class="jalousie-slat"></div>';
    echo '</div>';
  echo '</div>';
});

if you want less amount of jalousie-slat – remove some divs

now the css:

#preloader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    perspective: 1000px;
    overflow: hidden;
}

#jalousie-preloader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    transform-style: preserve-3d;
}

.jalousie-slat {
    width: 140%;
    position: relative;
    left: -20%;
    flex-grow: 1;
    background-color: #222222;  /* === change to your color you like === */
    transform-origin: 50% 50%;
    transition: transform 0.8s linear, opacity 0.4s linear 0.4s; 
    backface-visibility: hidden;
    transform: rotateX(0deg);
    opacity: 1;
    box-sizing: border-box;
}

body.loaded #preloader-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0.8s, visibility 0.3s 0.8s;
}

body.loaded #jalousie-preloader .jalousie-slat {
    transform: rotateX(90deg) scaleY(0.01);
    opacity: 0;
}

see here a better snippet that splits first into words then into chars:
https://webers-testseite.de/split-words/

until the bug is fixed – just re-enable the LayerSlider plugin:
Enfold (child) – Layout Builder – Integrated (bundled) LayerSlider plugin …

if you got that snippet inside your functions.php : add_theme_support('deactivate_layerslider');
remove that too.

this (huge padding left/right) is not the best method to restrict the content width; because what would you do on mobile?
There are settings on the column element itself to rule those settings for smaller screens. But – none of them is seen in the DOM – inspecting that page with dev tools.

now here is a pre question to be clear. After setting up your background-color on color-section – and the padding on 1/1 column :
Did you always complete the corresponding entries at the bottom of the element with “save” before you saved the page?

#top.page-id-918 #av_section_7 {
  background-color: #7bb0e7;
}

#top.page-id-918 #av_section_7 .flex_column.av_one_full {
  padding: 0 150px;
}

And btw. on all your other color-sections and 1/1 columns you do not have there a padding of 0 150px
The width is determined by manually set line-breaks !

see here my test page: https://webers-testseite.de/

my code to have a fixed header on mobile first – then after scroll a header with background-color:
because i do not see your page – the values ( of height / line-heigt etc. had to be adjusted ) – and I can give no better advice.
if your breakpoint is at 767px – change the media-query.

@media only screen and (max-width: 989px) {
    .responsive #top #wrap_all #header .container {
        width: 95%;
        max-width: 95%;
    }

  /* === values depends on if header_meta is present (80px + 35px) === 35px is the min-height of header_meta */
  #top #header {
    position:fixed !important;
    height:115px !important;
    max-height:115px !important
  }

    #top #header.av_header_transparency #header_meta {
        background-color: transparent;
    }

    #header_main {
        border-bottom: none;
    }

    #header:not(.av_header_transparency) #header_main {
        box-shadow: 0 5px 10px #eee;
    }

    .responsive #top .av-logo-container ,
    .responsive #top .logo a,
    .responsive #top .logo img,
    .responsive #top .logo svg {
        height: 80px !important;
        max-height: 80px !important;
        line-height: 80px !important;
    }

    .responsive #top .av-main-nav .menu-item-avia-special a {
        height: 80px !important;
        line-height: 80px !important;
    }  

    .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
        background-color: transparent !important;
    }

    #top .header_bg {
        background-color: transparent !important;
    }

    #top #header:not(.av_header_transparency) .header_bg {
        background-color: #FFF !important;  / *** change to your needed bg-color *** /
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
    .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
    }

    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
    .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
    }

    /*** if you got header_meta ***/
    #top #header.av_header_transparency #header_meta .phone-info * {
        color: #FFF !important;   / *** change to your needed bg-color *** /
    }

    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
        background-color: #FFF;  / *** change to your needed bg-color *** /
    }
    .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
        color: #FFF;  / *** change to your needed bg-color *** /
    }
    .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
        padding-top: 80px !important;
    }
    .responsive.html_header_top.html_header_transparency.html_mobile_menu_tablet  #top #main {
        padding-top: 0 !important;
    }
}

there might be some rulesets not neccessary for your setting – but as mentioned above your page is in maintainance mode.

By the way – most modern browsers support the pseudo-state: focus-visible
This is a good way to design keyboard navigation – because the normal handling of events by hover or click is not affected.

sorry i did not read the whole text here on that topic; but if i see something with inline-svg : did you have any css rule managing the width or height of svg’s ?

__________________
so this might be offtopic – but that was one reason why some of my svg icons seems not to be in place

On former installations of mine – i use a snippet to convert all img tags that are svgs to inline svgs. those svg’s that do not have a width and height definition inside the svg code ( only viewport settings ) need an absolute width to be shown. Otherwise these svgs are listed as 0x0 dimension.
For those svgs i have set in my quick css a rule like:
#top #main svg {width: 1500px}
with those new svg icons we have on iconbox.css this rule:

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em;
  width:1em;
  margin-top:3px
}

so my setting for inline svgs is more selective – and wins the game!
to avoid that :

.iconbox_icon.avia-svg-icon img[is-svg-img=true],
.iconbox_icon.avia-svg-icon svg:first-child {
  height:1em !important;
  width:1em !important;
  margin-top:3px
}

As i mentioned above – and Mike pointed out again – there are a lot of manual set linebreaks (<br>)
but if you like you can force a max width of the p-tags by font length units one of the modern one is ch (The width of the 0 character of the font in use) so – 110ch means nearly 110 characters. A more common font unit is em (The font size of the element, or its nearest parent container)

I would not recommend this procedure; I would probably rather limit the container itself there, but so that you can see that it also works via css:

#top .avia_textblock p {
  max-width: 110ch;
  word-wrap: break-word;
  margin: 0.85em auto 0;
}