Hi,
Thanks for the login, I tested in Chrome, Firefox, and Brave, as playertest13 on desktop & mobile, and in all cases the date picker showed in the middle of the screen and did not scroll under the header as in your first screenshot, it is centered like your second screenshot:


perhaps you have already solved this.

Best regards,
Mike

Hi,
Thank you for your patience, this is because in your SiteOrigin CSS you have this css:

.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0px !important;
}

I disabled it for you, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thank you for the inquiry.

We added this css code to reduce the default padding of the main container and the color section below the image.

#top #main .avia-section .template-page {
    padding-top: 0;
}

.template-page.content.av-content-full.alpha.units.av-enable-shadow {
    padding-top: 0;
}

Please note that this modification will be applied globally and will impact all color sections.

Best regards,
Ismael

Hi,

Thank you for the clarification.

To remove the highlight or focus outlines, try to add this css code:

#top .av-control-minimal .avia-slideshow-arrows a, #top .av-control-minimal .avia-slideshow-arrows a:before {
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

Best regards,
Ismael

Hi,

Great, I’m glad to hear that you got things working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that we could help. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey James,

Thank you for the inquiry.

Please try to add this css code and let us know of the result.

@media (max-width: 768px) {
    :target {
        scroll-margin-top: 200px;
    }
}

Make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings and purge the cache after adding the modification.

Best regards,
Ismael

Hey Antonio,

Thank you for the inquiry.

We updated the script and the style modifications a bit so that they only apply on desktop view:

Script:

function next_slide_on_image_click() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
    if (window.matchMedia("(min-width: 1024px)").matches) { // Apply only for screens wider than 1024px
        (function($){
            $('.avia-slide-wrap img').click(function() {
                $(this).closest('.avia-slideshow').find('.avia-slideshow-arrows a.next-slide').trigger('click');
            });
        })(jQuery);
    }
});
</script>
<?php 
}
add_action('wp_footer', 'next_slide_on_image_click');

CSS:

@media only screen and (min-width: 1024px) {
  .avia-slideshow-arrows.avia-slideshow-controls {
    height: 100% !important;
    width: 100% !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  #top .avia-slideshow-arrows a {
    width: 50% !important;
    height: 100%;
    top: 0;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
  }

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

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

Best regards,
Ismael

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Aron,
The circle loading is from Vimeo site waiting for the video to load, there is not a way to stop this.
You could try adding a fallback image to the color section to show before the video loads, such as the first frame of the video.

Best regards,
Mike

Hi,
I don’t have experience with this, his thread is still open, try posting to his thread as he may know.

Best regards,
Mike

Hi,
Thanks, I found that you had this css in your Quick css, as Guenni007 pointed out, I removed it and now your sticky header works

.html_header_top.html_header_sticky #header {
	position: sticky !important
}

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard