Mobile Menu ~ Dynamically Fill Screen

Hi Michae1!

Thank you for using Enfold.

Please add this in the functions.php file:

// menu mobile
add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
?>
<script type="text/javascript">
(function($) {
    function a() {

        var mh = $('#mobile-advanced').outerHeight() - 89,
                mi = $('#mobile-advanced').find('.menu-item'),
                mc = $(mi).length,
                nh = mh / mc / 2 - 13;
                
        $('#advanced_menu_toggle').bind('click', function() {
                $(mi).find('a').css({
                    'padding-top' : nh,
                    'padding-bottom' : nh,
                });            
        });

         $('#advanced_menu_hide').bind('click', function() {
                $(mi).find('a').removeAttr('style');            
        });       
    }

    setTimeout(a(), 1000);
})(jQuery);
</script>
<?php
}

And the following css code in the Quick CSS field:

#mobile-advanced li > a:before, .html_header_mobile_behavior #mobile-advanced span > a:before, #mobile-advanced .mega_menu_title:before {
    top: 40%;
}

Regards,
Ismael

Hi!

You can add it in the child theme’s functions.php file. Please post the code of the functions.php file on pastebin.com.

Regards,
Ismael

Hi!

We updated the code above. Please replace the code. Remove browser cache or hard refresh before testing the page.

Regards,
Ismael

Hey!

This is the updated code: https://kriesi.at/support/topic/mobile-menu-dynamically-fill-screen/#post-609967

Regards,
Ismael

Hi!

Works fine when I checked it. Could you please provide a screenshot of the issue? Did you add the css code?

Cheers!
Ismael