However, the question remains as to why this is the case for you. I use this setting relatively often and always had it so that even if an av-curtain-footer-container was in place, it was always part (child) of #main.

By the way, if you have two date pickers, one for the start date and one for the end date, you can restrict the second date picker so that it only allows dates that are later. For example, we can also remove weekends from the selection.

here in my example the minDate/maxDate are relative Values by +7 Days and +12 Month:

function my_datepicker_limits() {
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($) { 
    setTimeout(function() {
        var $allDatepickers = $('.avia_datepicker');

        // Let's assume that the first avia_datepicker found is the start date
        var $startDateField = $allDatepickers.eq(0);
        // and the second avia_datepicker found the end date
        var $endDateField = $allDatepickers.eq(1);

        // Check whether we have found at least two datepicker fields
        if ($startDateField.length === 0 || $endDateField.length === 0) {
            console.warn('Could not find both Start and End datepicker fields. Ensure they are the first two .avia_datepicker elements.');
            return; // Exit script if not enough fields are found
        }

        // Find the container of the end date field (the <p> element in your structure)
        // This is the parent tag of the input field that also contains the label.
        var $endDateFieldContainer = $endDateField.parent('p.form_element');

        // Fallback if the container is not the <p> tag or is not found
        if (!$endDateFieldContainer.length) {
            $endDateFieldContainer = $endDateField; // Then we only hide the input field itself
        }

        function updateEndDatepickerState() {
            var selectedStartDate = $startDateField.datepicker('getDate');
            

            if (selectedStartDate) {
                // Optional: Add one day to ensure that the end date is at least one day after the start date.
                // then remove the backslashes of the next line
                // selectedStartDate.setDate(selectedStartDate.getDate() + 1);
              
                // If a start date is selected, display the end date field
                $endDateFieldContainer.css('display', 'block'); // Verwendet 'block', da <p> ein Block-Element ist

                $endDateField.datepicker('option', 'minDate', selectedStartDate);

                // Optional: Make sure that the end date is not before the start date.
                var currentEndDate = $endDateField.datepicker('getDate');
                if (currentEndDate && currentEndDate < selectedStartDate) {
                    $endDateField.datepicker('setDate', selectedStartDate);
                }

            } else {
                // If no start date is selected, hide the end date field
                $endDateFieldContainer.css('display', 'none');

                // Reset minDate of the end date date picker (e.g. to “today”)
                $endDateField.datepicker('option', 'minDate', 0);
            }
        }

        if ($startDateField.data('datepicker')) {
            $startDateField.datepicker('option', {
                beforeShowDay: $.datepicker.noWeekends,
                minDate: "+7d", 
                maxDate: "+12m",
                onSelect: function(dateText, inst) {
                    // Update the state when a date is selected
                    updateEndDatepickerState();
                },
                onClose: function(dateText, inst) {
                    // Update the state even when closing the data picker (for robustness)
                    updateEndDatepickerState();
                }
            });
        }

        if ($endDateField.data('datepicker')) {
            $endDateField.datepicker('option', {
                // beforeShowDay: $.datepicker.noWeekends,
                minDate: 0,
                maxDate: "+12m"
            });
        }

        // Execute the function once when loading the page to set the initial state
        updateEndDatepickerState();

    }, 500);
}(jQuery));
});
</script>
<?php
}
add_action('wp_footer', 'my_datepicker_limits', 20);

see: https://webers-testseite.de/datepicker/

Edit here – because topic is closed:
This was also only intended as additional information. It is in case someone lands here via the search. They may have exactly this request.

this is the whole css for transparency fixed header on small screens ( if header_meta is present some height values had to be corrected ) from my testpage above:

@media only screen and (max-width:989px) {
  .responsive #top #wrap_all #header .container {
    width:95%;
    max-width:95%
  }
  #header {
    position:fixed !important;
    height:80px !important;
    max-height:80px !important
  }
  .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
  }
  #top .header_bg,
  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color:transparent !important
  }
  .responsive.html_mobile_menu_tablet #top #wrap_all #header:not(.av_header_transparency) {
    background-color:#FFF !important
  }
  #top #header.header-scrolled .header_bg {
    background-color:#FFF !important
  }
  .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
  }
  html:not(.html_header_transparency) #top .header_bg {
    background-color:#FFF !important
  }
  .responsive:not(.html_header_transparency).html_mobile_menu_tablet.html_header_top #top #main {
    padding-top:80px !important
  }
}

you can test it in dev tools by just make a copy of the jQuery script and put it in the console.
see: https://vimeo.com/1098726318/6ae8a411b5

but that comes from layout.css – no custom css at all:

#top .logo img.alternate {
  opacity: 0;
}

#top .av_header_transparency .logo a > img {
  opacity: 0;
}

#top .av_header_transparency .logo img.alternate {
  opacity: 1;
}

by the way: that snippet from your first post – does not work on my testinstallation ( Enfold 7.1.1). I do allways have inline svg.

As far as i know the avia-snippet-sticky-header does only rule the shrink amount , header height. (Two classes are toggled on scrolling)
On mobile devices the shrinking is set to off by that line i mentioned.

try :

@media only screen and (max-width: 1319px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

PS : why “Connection denied by IP2Location Country Blocker” for Germany ?

My interest in seeing the SVG was because you might not need an alternative logo. Why is there a construct with alternative logos in Enfold for transparent headers? In most cases, the only issue is the logo’s contrast with the background. However, since it is very difficult to influence a PNG or JPG in this respect, a second logo was used. As above, white text on a dark background.
With an inline SVG, however, I can achieve this by changing the elements within the SVG using external CSS.

if you only need these classes in the mobile case (header-scrolled or header-scrolled-full) to have a different logo, you can also change your logo via the class (av_header_transparency).

did you see my test page:
https://webers-testseite.de/8col-flex/
the colum on the right side – has a -100% – this is as if it is fixed a -150% will have that effect you described.

I change it for now to 150% in that function: link

short version with no comments and only with the changing of desktop parallax speed:
( Do not forget to set the custom ID: myID1 to the column )

function my_custom_all_parallax_settings_preserving_others() {
?>
<script>
window.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById('myID1');
    if (container) {
        const currentParallaxData = container.getAttribute('data-parallax');
        let parallaxObject = {};
        try {
            parallaxObject = JSON.parse(currentParallaxData || '{}');
        } catch (e) {
            console.error('Error parsing existing data-parallax attribute:', e);
            parallaxObject = {};
        }
        const changesToApply = {
            "av-desktop-parallax": "bottom_top", // Desktop 
            "av-desktop-parallax_speed": "-150",  // Desktop: Speed
        };
        Object.assign(parallaxObject, changesToApply);
        const newParallaxData = JSON.stringify(parallaxObject);
        container.setAttribute('data-parallax', newParallaxData);
    } 
});
</script>
<?php
}
add_action('wp_footer', 'my_custom_all_parallax_settings_preserving_others');

you can influence in post-slider depending on context

add_filter("avf_post_slider_args", function($atts, $context) {
	if( $context == "index" ) {
		$atts['type']  = 'grid'; 
		$atts['columns']  = 3;
		$atts['preview_mode'] = 'custom';
		$atts['image_size'] = 'gallery';
		$atts['contents'] = 'excerpt_read_more';
	}
	if( $context == "archive" ) {
		$atts['type']  = 'grid'; 
		$atts['columns']  = 4;
		$atts['preview_mode'] = 'custom';
		$atts['image_size'] = 'gallery';
		$atts['contents'] = 'excerpt_read_more';
	}
	if( $context == "tag" ) {
		$atts['type']  = 'grid'; 
		$atts['columns']  = 3;
		$atts['preview_mode'] = 'custom';
		$atts['image_size'] = 'entry_with_sidebar';
		$atts['contents'] = 'excerpt_read_more';
	}  
	return $atts;
}, 10, 2);

where did you found that filter: avf_post_featured_image_size ?

to bring that new added image format to the lists where you can choose the source you can use:

Edit: ok. there seems to be changed a lot on those filters – on my actual enfold theme my solution brings some errors.

add_action( 'after_setup_theme', 'my_custom_enfold_image_sizes' );

function my_custom_enfold_image_sizes() {
    add_image_size( 'custom-16-9-hero', 1280, 720, true );
}

add_filter( 'image_size_names_choose', 'my_custom_enfold_image_size_names' );

function my_custom_enfold_image_size_names( $sizes ) {
    return array_merge( $sizes, array(
        'custom-16-9-hero' => __( 'My Custom Featured Image' ),
    ) );
}

as i understood him it is the column not the section – so my way was to give the ID to the column.
The column has the parallax attribute. And i think he is talking about the parallax effect on element itself – not the background-image of the column. there is no option for that on columns.

I tested it on an existing testpage of mine ( so the codes there have nothing to do with the solution here ). but see the right column with that image.

https://webers-testseite.de/8col-flex/
see what happens when hamburger is active – the direction is then the other way round (+50)

my fault is that i do not preserve the rest of the existing settings – here a corrected code:

function my_custom_all_parallax_settings_preserving_others() {
?>
<script>
window.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById('myID1');

    if (container) {
        // 1. Get the current value of the data-parallax attribute
        const currentParallaxData = container.getAttribute('data-parallax');

        // 2. Parse the string into a JavaScript object
        let parallaxObject = {};
        try {
            // Attempt to parse existing data. If it's empty or invalid, start with an empty object.
            parallaxObject = JSON.parse(currentParallaxData || '{}');
        } catch (e) {
            console.error('Error parsing existing data-parallax attribute:', e);
            // If parsing fails, ensure parallaxObject is an empty object to avoid errors
            parallaxObject = {};
        }

        // 3. Define the changes you want to apply.
        //    Only the properties listed here will be updated or added.
        //    Existing properties not listed here will be preserved.
        const changesToApply = {
            "parallax": "bottom_top",       // Standard Parallax 
            "parallax_speed": "-150",       // Standard Parallax Speed

            "av-desktop-parallax": "bottom_top", // Desktop 
            "av-desktop-parallax_speed": "-100",  // Desktop: Speed

            "av-medium-parallax": "bottom_top",  // Medium Tablet
            "av-medium-parallax_speed": "50",   // Medium Tablet Speed

            "av-small-parallax": "no_parallax", // Parallax off
            "av-small-parallax_speed": "no_parallax", // no speed needed

            "av-mini-parallax": "no_parallax", // Mobil Parallax 
            "av-mini-parallax_speed": "no_parallax" // No Speed needed
            // Do NOT include "parallax-container" here, as we want to preserve its original value
        };

        // 4. Merge the changes into the existing parallaxObject.
        //    Object.assign() overwrites existing properties and adds new ones.
        //    Properties in 'parallaxObject' that are NOT in 'changesToApply' will remain untouched.
        Object.assign(parallaxObject, changesToApply);

        // 5. Convert the modified object back into a JSON string
        const newParallaxData = JSON.stringify(parallaxObject);

        // 6. Set the new value of the data-parallax attribute
        container.setAttribute('data-parallax', newParallaxData);

        console.log('Data attribute for parallax settings updated successfully!');
        console.log('New data-parallax value:', container.getAttribute('data-parallax'));
    } else {
        console.error('Container with ID "myID1" not found.');
    }
});
</script>
<?php
}
add_action('wp_footer', 'my_custom_all_parallax_settings_preserving_others');

btw: on 3. read that comment:

        // 3. Define the changes you want to apply.
        //    Only the properties listed here will be updated or added.
        //    Existing properties not listed here will be preserved.

so if you only want to influence the desktop parallax speed then only change it in the code above and do not mention the other settings there

The plugin allows you to add code snippets to your WordPress installation. Therefore, there must be an input field that contains code snippets. Just look at what you have tried to implement there. You can also insert such code snippets directly via child-theme functions.php. So if you don’t have a child theme, it would also explain the need for such a plugin.

if it is a script like this:

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');

then the mousedown (click) should bring the title back to the element. And lightbox had to show it.