Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1404427

    Dear Support Team:

    SUMMARY: I’m having problems accessing the bottom parts of my burger menu’s longer submenus on my iPhone. I don’t know if this is an iPhone issue or a mobile device issue. On a desktop with that window size, the bottom of the scrollbar is hidden because the overlay’s height goes past the bottom edge of the window. I created window height responsiveness on a desktop, but those stylesheets don’t work on my iPhone.

    DETAILS: I have 6 parent menu items and submenus under them (the longest contains 10 submenu items). I was initially testing my styles on a desktop making both the window width & height responsive. When I went to widths that couldn’t accommodate my menus, I of course switched to the burger menu. However, what I found when I clicked on the burger icon, which opened up the flyout overlay containing my menus, when I clicked on one of the longer menus to open it’s submenus, the bottom downarrow in the scrollbar in the overlay was pushed down below the bottom edge of the window, making it inaccessible.

    I saw that layout.css does:

        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        display: none;
        overflow: hidden;
        opacity: 0;

    So I created responsive stylesheets in my custom child theme’s header.css such as:

    @media only screen and (max-width: 614px) and (max-height: 659px) {
        #top .av-burger-overlay {
            /* Set height of burger overlay so bottom of scroll bar doesn't vanish */
            height: 395px;
    @media only screen and (max-width: 614px) and (max-height: 599px) {
        #top .av-burger-overlay {
            /* Set height of burger overlay so bottom of scroll bar doesn't vanish */
            height: 345px;

    That worked. However, when I switched to my iPhone, which has a width of 375px and height of 635px, my responsive code didn’t work. Whereas with a desktop window height that mimicked the size of my iPhone, it correctly adjusted the height of the overlay so that the bottom of the scrollbar was seen, on my iPhone the bottom of the overlay went all the way to the bottom of the screen, and when I tapped to open one of the longer menus, I was unable to scroll down with my finger to see (and hold) the lower-down submenu items, not to mention the remaining parent menu items beneath that submenu.

    Because avia-snippet-hamburger-menu.js contains…:

    $(function() {
        $.avia_utilities = $.avia_utilities || {};
        if( 'undefined' == typeof $.avia_utilities.isMobile ) {
            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement ) {
                $.avia_utilities.isMobile = true;
            else {
                $.avia_utilities.isMobile = false;
        //activates the hamburger mobile menu
        $(window).trigger( 'resize' );

    …I thought I’d do the following to just see if I can intervene.

    In my child theme’s functions.php I put:

    function myCustomScripts() {
        wp_enqueue_script( 'custom_scripts', get_stylesheet_directory_uri() . '/my_custom.js', array( 'jquery' ), false, true );

    and in the my_custom.js file I put:

    /*if ($.avia_utilities.isMobile) {*/
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement) {
        $(window).trigger( 'resize' );
    function my_avia_hamburger_menu_changes() {
        /*overlay_scroll.outerHeight(window.innerHeight - 300);*/

    As you can see from the commented out code, I tried a few different ways to affect change, but nothing worked. But of course I really don’t know what I’m doing with that, not really understanding enqueueing fully and how Enfold and WordPress executes dynamic code.

    Can you help please.

    Thank you,


    Hey Gary,

    I checked your website on my iPhone. While I’m able to see all of the submenus, clicking the bottom ones, such as “Repairs” seems a little buggy. Is this the issue you’re experiencing?

    If so, it looks like adding the following code to the Quick CSS field in Enfold theme options > General Styling tab fixes that issue:

    @media only screen and (max-width: 614px) {
    #top #wrap_all #av-burger-menu-ul {
    vertical-align: top;
    padding-top: 40px!important;

    After adding this code, your menu will no longer be center aligned though.

    If this isn’t the issue, please share a screen recording the show the issue you’re experiencing.

    Best regards,


    Hi Yigit!

    Thanks very much for replying and with your possible solution. But it didn’t work. I’ve included in the private section a permanent link to a video in my Dropbox illustrating the issue, and here is a permanent link to a public image in my Dropbox containing 6 screenshots of my iPhone (Figures 1-6) that I refer to: But here it is in writing as well:

    To me at least, it seems Enfold implements the burger menus/submenus in a bizarre way, creating empty gaps above & below the main burger menu to handle opening up submenus: Enfold’s burger menu overlay covers the entire vertical window space (on computer) & screen space (on mobile), and they put the first menu item correctly below the burger menu, leaving a big gap from the top of the screen/window (& overlay) to that first menu item (Figure 1) (I have chosen the Sidebar Flyout Menu (Classic) as the Menu Overlay Style in the child theme’s settings). Then when the user opens a submenu, instead of just opening the submenu under it’s parent menu like every other website implementation does, everything shifts up to the top of the screen (& overlay), filling in that big gap AND going underneath the burger menu icon (& my search button) on the z-axis (z-index-like) (Figure 2). In my expert opinion (I’ve done post-graduate MSc work in human-computer interaction (UX)), that is not good for the User Experience.

    So using responsive widths & heights, I decided to change the overlay margin-top & height so it’s always beneath the burger menu icon (& search button) (Figure 3), even when a submenu opens up (Figure 4). But if I do that, when a long submenu like for my Services menu opens up on a mobile device (well, I only tested on my iPhone), the bottom submenu items and the rest of the lowest parent menu items under that submenu become inaccessible, as the first part of my video demonstrates (sorry to other readers: I don’t have the video public). What’s happening is that the iPhone’s rubberband effect snaps to the 3rd last menu item, Patient Information, instead of the last menu item, Contact, making Contact and the FAQs menu item above it inaccessible for tapping. You can also see this in Figure 5, which shows that when I scroll to the bottom and let my finger go, the “rubberband effect” snaps the menu back to display Patient Information at the bottom of the screen, instead of the Contact menu item.

    Just as an aside: You can see in Figure 5 that Permanent Soft Liners on New & Old Dentures is highlighted: that’s not because I chose it (we’re still on the home page as you can see in the breadcrumbs (btw, I haven’t finished the breadcrumbs margins)), but because my finder happened to gently touch it as I swiped up to scroll down. That seems to be a bug in Enfold (I see it also in the Enfold demos, but not on any other website using my phone, even other websites made using WordPress).

    Back to our main problem: Actually, then another bug appears. If I attempt to scroll down a second time again, the outer window (the webpage content underneath the overlay) scrolls instead of the contents in the overlay, i.e. the menu. To me it seems overall that the code in avia-snippet-hamburger-menu.js is buggy.

    So as a compromise (unless you have a solution for this issue), I thought I’d just not change the overlay margin-top & height on actual mobile devices (hover: none), but just do it on computers (hover: hover) when the user decreases the window size to a burger width (or starts at that width with his web browser window):

    @media only screen and (max-width: 614px) and (min-height: 1px) and (hover: hover) {
        #top .av-burger-overlay {
            /* Start the overlay/flyout below the burger icon. */
            margin-top: 195px;/*215px; >>>  */

    In other words, leave it alone on mobile and go back to Figure 1 & 2. But doing that opens another problem I discovered. The rubberband effect works fine now, allowing me to scroll to the bottom of the menu and snap back to the bottom (Figure 6). But now when I tap the Contact menu item, instead of opening its submenu, it closes the burger menu entirely (the overlay disappears). If I open the burger menu again, scroll down to the bottom, and try tapping Contact again, the same thing happens. If I open the burger menu again, close the Services submenu, and tap the Patient Information submenu, and try tapping the Contact menu, it again does the same behavior. If I open the burger menu again, close the Patient Information submenu, and tap the FAQs submenu, and tap the Contact menu, this time it opens the Contact submenu correctly.

    Any help would be appreciated.



    I’m not sure what’s happened, whether one of you kind folks did something to fix my problem of clicking my Contact menu item on my iPhone not working, or something else magically happened (I did nothing to affect this fix as far as I know), but it’s now working.

    So I can accept using Enfold/Avia’s method doing the burger menu, which now at least is functional on my iPhone (and I assume on Android phones) in portrait orientation. So unless anyone can help me make my method of doing the burger overlay, moving the top of it to under the burger icon (and my Search icon)–which if possible would be ideal and much appreciated–you can close this thread.



    Hi Gary,

    Thank you for the update.

    It sounds like it was a caching issue because if anyone from the team worked on your site, we’d inform you.

    I’m happy that issue was resolved. Let us know if you have any other questions and enjoy the rest of your day!

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Bottom parts of submenus hidden/inaccessible in mobile burger menu’s overlay’ is closed to new replies.