i do not see my css code in your page!

have you read my post? i told you that it will not work if there are elements below.
Sticky elements do only hold there place inside the direct parent container. so there must be a column with huge content and the column besides with less height. This could be a sticky element then.

Insert my code above and look to your blog page: https://institutionofelectronics.ac.uk/news/
or more impressive then : https://institutionofelectronics.ac.uk/2025/05/30/designing-power-supplies-for-industrial-functional-safety-part-1/
or did you want something other than a sticky element. e.g. a fixed element, possibly even a draggable element?

you are talking about the news sites?

but if there are additonal columns below – what should happen?

have a look to one of your news pages or the blog page itself:

.responsive body#top.blog,
.responsive body#top.wp-singular {
  overflow-x: visible !important;
}

.responsive body#top.blog #wrap_all ,
#top.wp-singular #wrap_all{
  overflow: visible !important;
}

@media only screen and (min-width: 767px){  
  .responsive body#top.blog .sidebar_right .container,
  #top.wp-singular .sidebar_right .container{
    display: flex;
  }

  .responsive body#top.blog .sidebar ,
  #top.wp-singular .sidebar{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 180px;
    align-self: flex-start;
    flex: 0 1 30%
  }
}

but that does not work with following sections under the sticky container.

so it should be possible to have a burger menu on placing f.e. a code-block element with html code:

<nav class="datenschutz-menu" role="navigation">
  <div class="container av-menu-mobile-active">
    <a href="#" class="mobile_menu_toggle no-scroll" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello">
      <span class="av-current-placeholder">Datenschutz</span>
      <span class="subnav-hamburger subnav-hamburger--spin-r">
        <span class="subnav-hamburger-box">
          <span class="subnav-hamburger-inner"></span>
        </span>
      </span>
    </a>
    [menu name="datenschutz"] 
  </div>
</nav>

and then influencing it by:

function subnav_hamburger_first(){
?>
<script>
(function($){
    var $subham = $(".mobile_menu_toggle");
    $subham.on("click", function(a) {
		$subham.find(".subnav-hamburger").toggleClass("is-active");
		$subham.next(".menu-datenschutz-container").find('#menu-datenschutz').toggleClass("av-open-submenu");
    });
	$('#menu-datenschutz li').on("click", function(b) {
		$(this).addClass('selected').siblings().removeClass('selected');
		$(this).parents('#menu-datenschutz').toggleClass('av-open-submenu');
		$(this).parents('.av-menu-mobile-active').find('.subnav-hamburger').toggleClass('is-active');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'subnav_hamburger_first');

and a lot of css then

see on https://webers-web.info/hamburger/

PS: sorry i had to reinstall the whole website – so Privacy page is still not that way discussed above – i will change that today.

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 !