first – your logo is already on top with that z-index of 101. But the logo could not be seen due to that dark overlay background. Not enough contrast. – you see it if you set a background-color for it

.logo.avia-standard-logo {
  background-color: #d5d9d3
}

so – my first thought is to replace that png by a svg logo – where you can change the fill color by the status of the hamburger open or not.

e.g. take this svg instead for logo: https://webers-testseite.de/logo-femke-boschker.svg

and set for the change :

svg .fb {
  transition: all 0.3s linear;
}
.av-burger-overlay-active .fb {
  fill: #FFF;
}

____________

Or: why don’t you place an image (your logo image) inside the menu?
you can do that replacing the home menu-item or add an additional home menu item and replace that:

for navigation label you put in a standard img tag
<img class="avia_image" src="https://www.maartenwebsites.nl/dev-femke/wp-content/uploads/2026/02/logo-femke-boschker-scaled.png" />

PS: because you do not need to differ here between burger-menu and desktop text menu – you do not need that extra class.

PPS: maybe you use in this case a white alternative logo.

but you have seen on top left – the project settings ?

That page offers you the option for the advanced Layerslider Project.
On layout there is the option to have a popup slider.

You can choose the position and the dimension; you can have that popup open automatically – etc.
or in your case : open by click
enter a trigger ID or trigger class :

Enter a CSS selector to trigger the Popup when clicking a target element. Use a dot for class (e.g., .popup-trigger) or a hashtag for ID (e.g., #popup-button). The Popup will toggle open/close with repeated clicks. Leave blank if no trigger is needed.

next hint: if you like to have the chance to reopen the popup on another click to that button – scroll down again to Repeat Control:
and uncheck “prevent from reopening”.

Depending on your settings, the same Popup can be displayed in multiple times without reloading the page. Such example would be when you use a scroll trigger and the user scrolls to that location a number of times. Enabling this option will prevent opening this Popup consequently.

PS: do not forget before you leave the layerslider dashboard – to save and publish with these popup settings.

now link on your page a button to only # but give the custom-id (or custom class) to that button element: popup-button !!!

Do not link to the trigger ID (or class) just fill in the trigger ID or class on advanced tab – developer settings.

PPS: do not forget to place the layerslider to that page ;)

see: https://webers-testseite.de/advanced-layerslider/

• This reply was modified 2 weeks, 3 days ago by Guenni007.

Remember to adjust this value of 755px—this is because my installation has a maximum width of 1510px for content there.

hm – wasn’t it before in a 1/1 column?

Yes—now your page is opening. Now please explain to me how this is supposed to work with such large images above the thumbnails—it’s obvious that these images will cover the thumbnails below.
How about if the thumbnails scroll up to the side of the large sticky image?

There is no option on having all toggles open at start.
There is an option to have multiple toggles open at once, but the option to have them all open at startup is not included.
This could potentially be a useful addition.

you can place a snippet to your child-theme functions.php to give a click to all existing toggles.
if you want to be more selective you can use a custom class to do so.

try first without timeout :

function open_all_toggles_at_start(){
?>
<script>
(function($){
    $(function() {
            $(".toggler").trigger('click');
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'open_all_toggles_at_start');

i checked it here: https://kriesi.at/themes/enfold-one-page-portfolio/
and in DEV Tools the code works well. – yes maybe try it with important:

#top .scroll-down-link.avia-svg-icon svg:first-child {
  fill: #900 !important;
}

on Enfold Performance Tab – did you check to “Delete Old CSS And JS Files?”

Your page is still the block – but
Can you take a screenshot of my page and then draw on the image to show which spacing needs to be changed?
Based on your description, I don’t understand what you want to change.

i can not see your page due to:

see example page – with css code on:
https://webers-testseite.de/ajax-gallery/

in my case it is at 768px switching
I even made sure that the heights of the large images adjust when hovering over them, which is not the case in Enfold’s standard behaviour.

… in masonry galleries and grids

Anyway – maybe it will help another participant to handle the masonry galleries.

it is only for masonry gallery – not for masonry entries !

by the way: see the difference on one page with that snippet – the other without
the flexible masonry is identical to the other page – but grid and automatic grid :
https://webers-testseite.de/masonry-with-captions/
https://webers-testseite.de/masonry-with-captions-2/

But i’m currently try to optimise the snippet for the masonry that goes to a 1 Column layout on small screen – so wait for a complete solution – i try my best.

so in total : replace the snippet by:
( btw. i changed the code on my page too – if you hover the snippet there is on top right of the codeblock a copy button)

/**
 * Enfold Masonry Caption Fix - NUR für Perfect Grid
 * Schiebt die Caption unter das Bild, ohne es zu verdecken.
 */

function enfold_masonry_perfect_grid_caption_fix() {
?>
<style>
    /* ========================================
       PERFECT GRID CSS
       ======================================== */
    
    /* Erlaubt der Caption, über den Container hinauszuragen */
    #top .av-masonry.av-fixed-size.av-masonry-gallery .av-inner-masonry,
    #top .av-masonry-gallery.av-masonry-gallery-fixed figure.av-inner-masonry {
        overflow: visible !important;
    }
    
    /* Positioniert die Caption direkt unter das Bild-Quadrat */
    #top .av-masonry.av-fixed-size.av-masonry-gallery .av-inner-masonry-content,
    #top .av-masonry-gallery.av-masonry-gallery-fixed figcaption.av-inner-masonry-content {
        position: relative !important;
        top: 100%;
        background: #ffffff; /* Hier ggf. deine Wunschfarbe für den Hintergrund */
    }

    /* Korrektur für Tablets */
    @media only screen and (min-width: 767px) and (max-width: 989px) {
        .responsive .av-masonry-gallery .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
            display: block !important;
        }
    }
</style>
    
<script>
    (function($) {
        'use strict';
        
        function fixPerfectGrid() {
            // Nur für Masonry Galerien mit festem Raster (Perfect Grid)
            $('.av-masonry-gallery.av-masonry-gallery-fixed, .av-masonry.av-fixed-size.av-masonry-gallery').each(function() {
                var $gallery = $(this);
                var columnCount = 1;
                
                // Spaltenanzahl ermitteln
                if ($gallery.hasClass('av-masonry-col-2')) columnCount = 2;
                else if ($gallery.hasClass('av-masonry-col-3')) columnCount = 3;
                else if ($gallery.hasClass('av-masonry-col-4')) columnCount = 4;
                else if ($gallery.hasClass('av-masonry-col-5')) columnCount = 5;
                else if ($gallery.hasClass('av-masonry-col-6')) columnCount = 6;
                
                if ($gallery.hasClass('av-masonry-col-flexible')) {
                    var $items = $gallery.find('.av-masonry-item-with-image:visible');
                    if ($items.length >= 2) {
                        var firstTop = $items.eq(0).offset().top;
                        var itemsInFirstRow = 1;
                        for (var i = 1; i < Math.min($items.length, 10); i++) {
                            if (Math.abs($items.eq(i).offset().top - firstTop) < 10) {
                                itemsInFirstRow++;
                            } else { break; }
                        }
                        columnCount = itemsInFirstRow;
                    }
                }
                
                // Maximalhöhe der Captions finden, damit die Zeilen gleichmäßig bleiben
                var maxCaptionHeight = 0;
                $gallery.find('.av-masonry-item-with-image').each(function() {
                    var $caption = $(this).find('figcaption.av-inner-masonry-content, .av-inner-masonry-content');
                    if ($caption.length && $caption.is(':visible')) {
                        maxCaptionHeight = Math.max(maxCaptionHeight, $caption.outerHeight(true));
                    }
                });
                
                // Abstand unten einfügen, damit das Masonry-Layout Platz für die Caption lässt
                if (maxCaptionHeight > 0) {
                    $gallery.find('a.av-masonry-entry, .av-masonry-item-with-image').css('margin-bottom', maxCaptionHeight + 'px');
                }
            });
            
            // Layout neu berechnen
            $('.av-masonry-gallery.av-masonry-gallery-fixed, .av-masonry.av-fixed-size.av-masonry-gallery').isotope('layout');
        }   

        // ========================================
        // INITIAL LOAD - Nur auf Bilder warten, nicht auf die ganze Seite
        // ========================================
        (function() {
            var $gallery = $('.av-masonry-gallery');
            
            if ($gallery.length && typeof $.fn.imagesLoaded === 'function') {
                // Wartet NUR auf die Bilder in der Galerie
                $gallery.imagesLoaded(function() {
                    setTimeout(fixPerfectGrid, 200);
                });
            } else {
                // Fallback für den Notfall
                setTimeout(fixPerfectGrid, 600);
            }
        })();

        
        // Nach Enfold Events
        $(document).on('av-masonry-complete', function() {
            setTimeout(fixPerfectGrid, 250);
        });
        
        // Bei Größenänderung
        $(window).on('debouncedresize', function() {
            // Reset Margin
            $('.av-masonry-gallery.av-masonry-gallery-fixed .av-masonry-item-with-image, .av-masonry.av-fixed-size.av-masonry-gallery .av-masonry-item-with-image').css('margin-bottom', '');
            fixPerfectGrid();
        });
        
    })(jQuery);
</script>
<?php
}
add_action('wp_footer', 'enfold_masonry_perfect_grid_caption_fix', 999);

i also replaced the on load event by:

// Run initially
$(window).on('load', function() {
    $('.av-masonry-gallery').imagesLoaded(function() {
        setTimeout(fixAllMasonryModes, 200);
    });
});

and implemented the enfold debounceresize function on performance reasons.

See : https://webers-testseite.de/masonry-with-captions/

but there is a second snippet – but:

Different Solution – even the captions will have the same height on perfect Grid
However, this does not look so good in some cases if the captions are of too different sizes.