Search Icon To Main Menu don’t work

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

Hi,

lastly that I use Enfold on almost all the sites I manage, and this site is the only one that has had this problem.

It’s probably an issue with the compression, a certain modification or one of the plugins. Please keep the above modifications for now and let us know if the issue occurs again on a different site.

Thank you for your patience.

Best regards,
Ismael