Full page overlay menu

Hey mirr,

Please try the following in Quick CSS under Enfold->General Styling:

#top li.av-burger-menu-main {
  position: fixed; 
}

#top #av-burger-menu-ul {
  vertical-align: top;
}

Best regards,
Rikard

Hi,

Thank you for the inquiry.

1.) You can adjust the style of the burger menu items in the Enfold > Advanced Styling panel. Look for the element under the Main Menu (Icon) section. You can also use this css code:

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
    line-height: 1em;
    font-size: 2em;
}

Please make sure to toggle the Enfold > File Compression settings and purge the cache.

2.) Add this script to the functions.php file to make the close icon fade out on scroll down and fade in again on scroll up.

function ava_custom_script_fade_scroll()
{
    ?>
    <script>
        (function ($)
        {
            $(document).ready(function () {
                var lastScrollTop = 0;
                var element = $('.av-hamburger.av-hamburger--spin.av-js-hamburger.av-inserted-main-menu.is-active');
                $(window).scroll(function () {
                    var st = $(this).scrollTop();
                    if (st > lastScrollTop) {
                        element.fadeOut();
                    } else {
                        element.fadeIn();
                    }
                    lastScrollTop = st;
                });
            });
        })(jQuery);
    </script>
    <?php
}
add_action('wp_footer', 'ava_custom_script_fade_scroll');

Best regards,
Ismael

Hi,

Thank you for the update.

You can add this css code to adjust the position of the menu items and the close icon.

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

  /* Add your Mobile Styles here */
  #top #av-burger-menu-ul {
    padding: 100px 0 !important;
  }

  .responsive #top #wrap_all .main_menu {
    top: -120px;
  }
}

Best regards,
Ismael

Hi,
when I check your mobile menu the top line is almost on the burger menu “X” please see the screenshot in the Private Content area to ensure that this is what you see also.
If not then perhaps your mobile device cache is showing you an old version, if this is what you see and you want it even higher try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
    vertical-align: top;
    padding: 190px 0 !important;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Thanks for the screenshot, so you want to move the burger menu “X” over the logo, are you sure you want to do this, each time you open and close the burger menu on mobile there is going to be a big “jump”. Right now the burger menu icon stays in the same place when open or closed.
Nonetheless, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
  #top #av-burger-menu-ul {
    vertical-align: top !important;
    padding: 130px 0 !important;
  }
  .responsive.av-burger-overlay-active #top #wrap_all .main_menu {
    top: -90px;
  }
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike