Menu Dropdowns not working – Elementor Header Menu on WordPress

Issue

The header is designed using "Elementor – Header, Footer & Blocks" plugin. The dropdown is not working. Tried activating, deactivating plugin, clearing cache.

Website Link:
https://www.party-monsters.com/

Solution

Try this below code. code goes in your active theme functions.php file.

function add_custom_js(){
    ?>
    <script type="text/javascript">
        (function($){
            $(document).ready(function(){
                $('.hfe-has-submenu .hfe-menu-item').on('click',function(e){
                    e.preventDefault();
                    if( $(this).closest('li').find('.sub-menu').css('opacity') === '0' ){
                        $(this).closest('li').find('.sub-menu').css({"visibility": "visible", "opacity": "1"});
                    }else{
                        $(this).closest('li').find('.sub-menu').css({"visibility": "hidden", "opacity": "0"});
                    } 
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action( 'wp_footer', 'add_custom_js', 10, 1 );

Tested and works.

Answered By – Bhautik

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0