Hey Silvia,
Try this thread, please read the whole thread.

Best regards,
Mike

Hi,

Try to edit the Contact Form element and set the Styling > Form Color Scheme to Dark Transparent. You can also replace the previous css with this:

#top #wrap_all .main_color .button, .main_color #submit, #top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

We edited the Horizontal Gallery element and set Stil > Galerie > Bildgröße to “No scaling” to display the original size, then added this css code to adjust the minimum height of the gallery.

@media only screen and (max-width: 768px) {

  /* Add your Mobile Styles here */
  .responsive .av-horizontal-gallery-inner {
     min-height: 500px !important;
  }

   .responsive .av-horizontal-gallery-img {
      transform: none;
      top: 0;
   }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Please remove the previous modification and replace it with the following css code, then make sure to purge the cache or clear your browser history afterward.

#top #wrap_all .contact-form :is([type=submit], button:not([type=reset])) {
    align-items: center;
    display: inline-flex;
    gap: .5em;
    justify-content: center;
    border-radius: 100px;
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.6);
    background: 0 0;
    font-size: 14px;
    border-style: solid;
    border-width: 1px;
    transition: all 0.4s ease-in-out;
    padding: 9px 10px 7px;
    width: 80px;
}

Best regards,
Ismael

Hi,
The plugin Header Footer Code Manager is limited and only allows HTML & JS, where WPCode allows these and PHP & CSS, in the past I tested both and found WPCode, the free version, to be much better considering that most snippets are PHP. I would recommend replacing Header Footer Code Manager with WPCode, or use a child theme.
But since your AXE & WAVE is not reporting the change to aria-hidden correctly I don’t think that we can create a solution that will help. If you watch the DOM in the browser you will see that the aria-hidden does change on scroll. We could set the aria-hidden to false always, but then on page load you would see an error, instead of after scroll. I would hope that a real screen reader would report this correctly and recognize changes to the DOM in real time, unlike the testing tools, otherwise you may need to disable this Scroll-to-Top feature.
To request the Dev Team to review this, please open a new Github Feature Request to place a request and follow it as the Dev Team reviews it.

Best regards,
Mike

Hi,
Thanks for your help Guenni007, but in my test it seems that only targeting the ID “#av_section_1” didn’t help, I tried adjusting to const container = document.querySelector('#av_section_1 .av-parallax-object'); to target the text in the parallax but as you pointed out it was jerky for the speed needed.
With trial and error and AI I found that this javascript & css works well for desktop & mobile and smooths out most all the jerk from the text and background image.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function move_text_in_parallax_down_on_scroll() { ?>
  <script>
  document.addEventListener("DOMContentLoaded", function () {
  const el = document.querySelector("#av_section_1 .av-parallax-object");
  const bg = document.querySelector("#av_section_1 .av-parallax");

  if (!el || !bg) return;

  const isMobile = window.innerWidth < 768;

  const textSpeed = isMobile ? 0.9 : 0.7;
  const bgSpeed = isMobile ? 0.3 : 0.2;

  let currentYText = 0;
  let currentYBg = 0;

  const updateParallax = () => {
    const scrollY = window.scrollY || window.pageYOffset;

    // Text transform
    const targetYText = scrollY * textSpeed;
    currentYText += (targetYText - currentYText) * 0.05;
    el.style.transform = translateY(${currentYText}px);

    // Background transform
    const targetYBg = scrollY * bgSpeed;
    currentYBg += (targetYBg - currentYBg) * 0.05;
    bg.style.transform = translateY(${currentYBg}px); // GPU accelerated

    requestAnimationFrame(updateParallax);
  };

  requestAnimationFrame(updateParallax);
});
  </script>
  <style>
  #av_section_1 .av-parallax-object {
  position: relative;
  top: 0;
  left: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
#av_section_1 {
  position: relative;
  overflow: hidden;
}
#av_section_1 .av-parallax {
  background-attachment: scroll !important; /* disables fixed scroll handling */
  background-position: center center !important;
  transform: none !important;
  will-change: auto !important;
}  
  </style>
  <?php
}
add_action( 'wp_footer', 'move_text_in_parallax_down_on_scroll', 99 );

If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save.

Best regards,
Mike

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (min-width: 991px) {
.html_header_transparency #main {
  padding-top: 118px !important;
}
}

Best regards,
Rikard

Hi,
Please note that the Fluent Forms month field is a select div with options using this css:

#top select {
    -webkit-appearance: none;
    border-radius: 0;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
    background-position: center right;
    background-repeat: no-repeat;
    border-radius: 2px;
}

showing a image for the drop down giving you this:

and when you click on it shows the options:

since the year is not a select div with options, but a input with spans you will not see this or the same image.
I wrote this css to override the plugin css:

#top .numInputWrapper .arrowUp,
#top .numInputWrapper .arrowDown {
    opacity: 1;
    display: flex;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -5px;
}
.numInputWrapper span.arrowUp:after,
.numInputWrapper span.arrowDown:after {
    top: 0;
    height: 14px;
}
#top .numInputWrapper .cur-year {
	margin-bottom: 14px;
}

but this is about as close as we can get it, since we can not support third party plugins, if you need more help with this please ask the plugin author to examine. I don’t see any theme css causing this issue.

Best regards,
Mike

Hi,
Thank you for sharing your solution, but when I test our demo there are no IDs added to the mobile menu items, unless you mean a menu link with an ID to an anchor on the page. I tested in WAVE and found no errors for IDs.
If you mean the link IDs to anchors on the page, note that the mobile menu is not created until the menu is clicked, nonetheless since most people use the same link IDs on their page for mobile and desktop, this would break their links.
Since I can not reproduce your issue and this is beyond what we can do here, you are welcome to open a Github Feature Request to place a request and follow it as the Dev Team reviews it.

Best regards,
Mike

Hey Diana,
Thanks for the login, I added this code to your theme functions.php file:

function change_aria_hidden_for_scroll_top_link_when_it_shows() { ?>
  <script>
window.addEventListener('scroll', function() {
  const scrollTopLink = document.getElementById('scroll-top-link');

  if (!scrollTopLink) return;

  const style = window.getComputedStyle(scrollTopLink);
  const rect = scrollTopLink.getBoundingClientRect();
  const inViewport = rect.width > 0 && rect.height > 0;

  const ariaValue = (style.display !== 'none' && style.visibility !== 'hidden' && inViewport) ? 'false' : 'true';

  scrollTopLink.setAttribute('aria-hidden', ariaValue);

  const childSVGs = scrollTopLink.querySelectorAll('svg');
  childSVGs.forEach(svg => {
    svg.setAttribute('aria-hidden', ariaValue);
  });
});
  </script>
  <?php
}
add_action( 'wp_footer', 'change_aria_hidden_for_scroll_top_link_when_it_shows', 99 );

It changes the aria-hidden for the scroll-top-link and the SVG icon when it shows, from false to true.
I tested in the browser DOM and it works. Unfortunately we don’t have access to the AXE tool as it looks like a paid tool, but I did check in WAVE. Unfortunately, while in the live browser the code works, the WAVE tool doesn’t update the DOM so it doesn’t look like it is working, perhaps this is a limitation of the free version, I don’t know.
I tried to add this to your snippet Header Footer Code Manager plugin but it didn’t work there, the plugin seems limited, if you find this workshop for you and If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

and ensure that it is activated, then add the above code and save, after you remove it from the theme functions.php file so it will not be lost when you update.

PS for testing this is the snippet with console log comments that I tested with that will show that the aria-hidden changes while the page is scrolled:

function change_aria_hidden_for_scroll_top_link_when_it_shows_log() { ?>
  <script>
window.addEventListener('scroll', function() {
  const scrollTopLink = document.getElementById('scroll-top-link');

  if (!scrollTopLink) {
    console.log('Element #scroll-top-link not found.');
    return;
  }

  const style = window.getComputedStyle(scrollTopLink);
  const rect = scrollTopLink.getBoundingClientRect();
  const inViewport = rect.width > 0 && rect.height > 0;

  console.log('Scroll event triggered.');
  console.log('Display:', style.display);
  console.log('Visibility:', style.visibility);
  console.log('BoundingClientRect:', rect);
  console.log('In viewport:', inViewport);

  const ariaValue = (style.display !== 'none' && style.visibility !== 'hidden' && inViewport) ? 'false' : 'true';

  console.log(#scroll-top-link is ${ariaValue === 'false' ? 'visible' : 'hidden'}. Setting aria-hidden to ${ariaValue}.);

  // Set on the main link
  scrollTopLink.setAttribute('aria-hidden', ariaValue);

  // Set on any child SVGs
  const childSVGs = scrollTopLink.querySelectorAll('svg');
  childSVGs.forEach(svg => {
    svg.setAttribute('aria-hidden', ariaValue);
    console.log('Updated child SVG aria-hidden to', ariaValue);
  });
});

  </script>
  <?php
}
add_action( 'wp_footer', 'change_aria_hidden_for_scroll_top_link_when_it_shows_log', 99 );

don’t use both snippets at the same time, this is just for proof of work.

Best regards,
Mike

Hi,
Try this thread.

Best regards,
Mike

Hey minhndq,
Duplicate thread for https://kriesi.at/support/topic/flatpickr-date-picker-year-dropdown-not-displaying-in-fluent-forms/#post-1485947
We will close this one.

Best regards,
Mike