Hey laptophobo,

Thank you for the inquiry.

Try to add this filter in the functions.php file to remove the default attributes of the SVG icons:

add_filter('avf_ignore_svg_aria_attributes', '__return_true');

Let us know the result.

Best regards,
Ismael

Hi,
I have researched this and while there is a long technical explanation for why the WAVE test tool is flagging this, I found a solution in my research. Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function remove_link_from_search_icon_and_add_it_back_on_click() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    const searchLink = document.querySelector('#menu-item-search a');
    if (searchLink) {
        // Store the original href
        const originalHref = searchLink.getAttribute('href');
        // Remove the href on page load
        searchLink.removeAttribute('href');
        
        // Add click event to restore href
        searchLink.addEventListener('click', function() {
            if (!searchLink.getAttribute('href')) {
                searchLink.setAttribute('href', originalHref);
            }
        });
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'remove_link_from_search_icon_and_add_it_back_on_click', 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.
I tested this on the WAVE Web Accessibility Evaluation Tool and it removed the error.

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

Hey SurigliaStudio,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function blog_title_above_image() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $('.slide-entry').each(function() {
  $(this).find('.entry-content-header').insertBefore( $(this).find('a.slide-image'));
  $(this).find('.av-vertical-delimiter').css('display','none');
  });
})(jQuery);
});
  </script>
  <?php
}
add_action( 'wp_footer', 'blog_title_above_image', 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.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hey rjalthar,

Thank you for the inquiry.

It seems to be an issue with the image overlay. Could you confirm the current version of the theme? Make sure the theme is updated to version 7.1, then try to temporarily toggle or disable the settings under Enfold > Performance > File Compression.

To fix the issue temporarily, you can add the following css code to disable the image overlay:

#top .image-overlay.overlay-type-image {
    display: none !important;
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

Try to add this css code to make the .avia_hidden_link_text accessible but still not visible in the slider links.

#top .avia_hidden_link_text {
    display: block;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

Another option is to add aria-label to the slider links by editing the slider template directly or with javascript. Example:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('a.next-slide').forEach(function(link) {
    link.setAttribute('aria-label', 'Weiter');
  });
});

Best regards,
Ismael

Hey bonsaimedia,

Thank you for the inquiry.

Try targeting the content wrapper of the second color section instead.

#av_section_2 .entry-content-wrapper {
	margin-top: -600px;
}

If you need to apply this to specific color sections, try to assign a Advanced > Developer Settings > Custom CSS Class to them, then adjust the css rule accordingly.

Firefox screenshot:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the info.

We are not certain why the search SVG icon is not displaying, but we managed to work around the issue by adding this code in the Quick CSS field:

#top .menu-item-search-dropdown > a.avia-svg-icon svg:first-child, #top .menu-item-search-dropdown > a.avia-svg-icon img[is-svg-img="true"] {
    z-index: 1;
}

We also added this script to make sure that when the SVG icon is clicked, it displays the AJAX search field.

add_action( 'wp_footer', 'av_custom_script', 100 );
function av_custom_script() {
    ?>
    <script>
    // trigger ajax search field
    document.addEventListener("DOMContentLoaded", () => {
        const svg = document.querySelector("#menu-item-search svg");

        if (svg) {
            svg.addEventListener("click", (e) => {
                e.preventDefault();
                e.stopPropagation();

                const parentLink = svg.closest("a");
                const parentLi = svg.closest("li");

                if (parentLink) {
                    parentLink.click();
                } else if (parentLi) {
                    parentLi.click();
                }
            });
        }
    });
    </script>
    <?php
}

Best regards,
Ismael

Hey GWS,

Thank you for the inquiry.

Try to include this css code.

#scroll-top-link.avia-svg-icon svg:first-child, #scroll-top-link.avia-svg-icon:hover svg:first-child {
    stroke: #ffffff;
    fill: #ffffff;
}

Result:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update.

We cannot find the snippet “Child Pages Top Level Shortcode” in the list, only the “Shortcode: Child Pages List” which we enabled and added to the “verein” page. This seems to be working as expected.

View post on imgur.com

Best regards,
Ismael

Hi,

1.) You can adjust the width of the widgets inside the header to reduce the gaps between them and create space on the right side.

Example:

.responsive #top #header #header_main .inner-container .widget:nth-child(3) {
    order: 2;
    flex-basis: 10%;
}

Try to do the same for the other widgets, then apply a right margin to the last one.

.responsive #top #header #header_main .inner-container .widget:nth-child(5) {
    margin-right: calc(50% - 570px) !important;
}

The value of 570px is based on the maximum container width of 1340px.

2.) Try removing the padding from the menu container and set its width.

.responsive #top #header #header_main .inner-container .main_menu .avia-menu.av-main-nav-wrap {
    padding: 0 50px;
    width: 1340px;
}

Best regards,
Ismael

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.av_minimal_header .avia-menu-fx {
    display: block;
    top: 155%;
    width: calc(100% - 26px);
    left: 13px;
}

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