see here example with “burger” always visible – and with #footer-page as overlay.

https://basis.webers-testseite.de/

if you are interested in that – i gave you a step by step guide.

to get a “footer-page” with dynamically feed menues – you can use the menu shortcode :

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)
        'title' => '', // New: Default to an empty title
        'title_tag' => 'h2', // New: Default title HTML tag
        'title_class' => 'menu-title', // New: Default title CSS class
    ), $atts ) );

    $output = ''; // Initialize output variable

    // If a title is provided, add it to the output
    if ( ! empty( $title ) ) {
        $output .= '<' . esc_attr( $title_tag ) . ' class="' . esc_attr( $title_class ) . '">' . esc_html( $title ) . '</' . esc_attr( $title_tag ) . '>';
    }

    if ( ! empty( $name ) ) {
        $output .= 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 $output; // Return the accumulated output
}
add_shortcode( 'named_menu', 'custom_named_menu_shortcode' );

it is used like this:
[named_menu name="your-menu-name" class="my-custom-menu" depth="2" title="Our Main Menu"]

then you can setup your layout with codeblock elements – each of them represents a menu ( or different shortcode – f.e. social-media )

but for that i wouldn’t use the enfold burger icon – instead i would place a custom Button – perhaps a fixed button to toggle a class to hide/show this page.

if you like to bing those arrows to the center of the gallery height:

#top div .avia-gallery {
  position: relative;
}

.avia-gallery.av-slideshow-ui .avia-slideshow-arrows {
  width: 100%;
  height: 60px;
  top: calc(50% - 30px);
}

#top .avia-slideshow-arrows a {
  top: 0;
}

maybe put each of those elements in a separate 1/1 container. The icon-box and the gallery.

or try in quick css:

#top div .avia-gallery {
  position: relative;
}

on 6 items besides each other the setting vor less than 767px is allready set to 33% – and this looks nice to me.

Maybe you only like to influence the range inbetween:

@media only screen and (min-width: 768px) and (max-width: 989px) {
  #top .avia-custom-gallery .avia-gallery-thumb a {
    width: 25% !important;
  }
}

is it a gallery or a masonry gallery?

Rikard’s code should do the job – but the specificity is the same as the original rule. So you need to be more specific in your selector or override it with !important.

@media only screen and (max-width: 767px) {
   #top .avia-gallery .avia-gallery-thumb a {
     width: 50% !important;
   }
}

or

@media only screen and (max-width: 767px) {
  #top #wrap_all .avia-gallery .avia-gallery-thumb a {
    width: 50% ;
  }
}

if you do like to have it only on that gallery – use a custom class to that element.

Eventuell wird es dir auf dieser Seite deutlicher. https://webers-testseite.de/sticky-sidebar/

Das unmittelbare Elternelement zu dem Sticky Element ( bei Columns in einer Color-Section ist es der entry-content-wrapper ) muss der Flex-Container sein. Und auf deiner Seite muss gelten:

.responsive #top {
    overflow-x: visible;
}

 #top #wrap_all {
    overflow: visible;
}

Da es nur Sinn macht, wenn die Columns nebeneinander liegen, setzt man die Flex Bedingung am besten nur für diesen Fall ein; also für screens die größer sind als der Umbruchpunkt (768px oder 990px)

but you do not belong to the up and down of “Kia Ora!” section?

This comes from the slider above – that has 3 Groups and the last only got 4 items. So it’s height is less than the others.

Did it solve your problem, or did you find it to be less important than you thought?

I had understood him differently. For example, if he opens the page : Link via the menu, then it should open directly in the opened ajax style.

Versuch doch mal das in der child-theme functions.php:

function trigger_click_on_ajax_categories(){
?>
<script>
(function($){
    $(window).on('load', function(){
        // Prüfen, ob das Element mit der Klasse 'grid-links-ajax' auf der Seite existiert
        if ($('.grid-links-ajax').length > 0) {
            setTimeout(function() {
                // Sicherstellen, dass das erste Element vorhanden ist, bevor der Klick ausgelöst wird
                const firstGridItem = $(".grid-links-ajax .grid-entry.first");
                if (firstGridItem.length) {
                    firstGridItem.find('.grid-image').trigger('click');
                }
            }, 300);
        }
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'trigger_click_on_ajax_categories');

eventuell musst du das timing etwas erhöhen.

you mean when hamburger is visible.

put that rule of ismael inside a media-query:

@media only screen and (min-width: 989px) {
  #top .av_header_transparency .header_bg {
    opacity:1;
    background:linear-gradient(to bottom,#132444,rgba(17,18,53,0))
  }
}

To prevent this from happening with logos, you could also switch to setting the classes (usually only fill information) as inline information directly on the vector f.e. : <path fill="#197889" d=" . . . "></path>
Try here to get rid of classes: https://jakearchibald.github.io/svgomg/

check “inline styles” and “styles to attributes”

btw. ismael – I have no success with the filter either:

i use for title attributes on links, images etc. this function in my child-theme functions.php:

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
    var elementsWithTitle = document.querySelectorAll('a, img, *[title]');
    for (var i = 0; i < elementsWithTitle.length; i++) {
        var element = elementsWithTitle[i];

        element.setAttribute("data-original-title", element.title);

        element.addEventListener("mouseenter", function() {
            this.title = ""; 
        });

        element.addEventListener("mouseleave", function() {
            this.title = this.getAttribute("data-original-title"); 
        });

        element.addEventListener("mousedown", function() {
            this.title = this.getAttribute("data-original-title");
        });
    }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

BUT this will not influence the <title> inside the xml code of a svg file!

you can get rid of those <title> but i do not know a way to get them back by mouseleave or mousedown event:
the code above with a little addon – so use instead:

function temporary_removal_title_tags_and_get_rid_of_svg_titles(){
?>
<script>
  window.onload = function() {
      var elementsWithTitle = document.querySelectorAll('a, img, *[title]');

      for (var i = 0; i < elementsWithTitle.length; i++) {
          var element = elementsWithTitle[i];

          element.addEventListener("mouseenter", function() {
              if (this.title) { 
                  this.setAttribute("data-original-title", this.title);
                  this.title = ""; 
              }
          });

          element.addEventListener("mouseleave", function() {
              var storedTooltip = this.getAttribute("data-original-title");
              if (storedTooltip !== null) { // Prüfen, ob ein Originaltitel gespeichert wurde
                  this.title = storedTooltip;
                  this.removeAttribute("data-original-title"); // Aufräumen
              }
          });

          element.addEventListener("mousedown", function() {
              var storedTooltip = this.getAttribute("data-original-title");
              if (storedTooltip !== null) {
                  this.title = storedTooltip;
                  this.removeAttribute("data-original-title");
              }
          });
      }

      var allSvgs = document.querySelectorAll('svg');
      allSvgs.forEach(function(svg) {
          var svgTitles = svg.querySelectorAll('title');
          
          svgTitles.forEach(function(svgTitleElement) {
              if (svgTitleElement.textContent.trim() !== '') {
                  svgTitleElement.setAttribute("data-original-svg-title", svgTitleElement.textContent);
                  svgTitleElement.textContent = ""; // Leeren des SVG-Titels
              }
          });
      });
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags_and_get_rid_of_svg_titles');

why not delete all title tags: sometimes these are needed for lightbox bottom bar

check this page with your iPhone: https://webers-testseite.de/sam/
if you have convinced yourself that it works on mobile devices – I will take my site down again.

on my iPhone i got this message from your page: “Please set a mobile device fallback imgage for this video in your wordpress backend.”
so now i recognise that you use the fullwidth-slider.

i used for the video a color-section with video background. And set on
“Section Minimum Height – …(responsive section) to 56% (9/16*100)”. ( on a 16/9 video)