Mobile navigation not properly indexing and text not aligning

We are having an issue with out sites mobile menu. The main issue can only be replicated from a physical mobile device. If trying to replicate it from the chrome developer console mobile view does not always show the issue.

The mobile menu when clicked on a mobile device is not properly z-indexing the dropdown menu page. Causing the close button to lay over the menu open button. So when you click the close button you are also hitting the menu button. Causing the menu to open back up. Also the menu page is showing underneath the "Hero" text because of the z-index being off.

We have tried several ways to reset the z-index of the drop down menu page with no luck.

Also the text placement option for the menu is not working. We keep trying to select to align the mobile menu text to the center but it will not set.

  • Milan

    Hello @Bryant,

    I hope you are having a good day and thanks for asking us.

    I've just watched your website from my cell phone and I can confirm issue you mentioned. To dig deep into the issue, Would you please grant me support staff access so that I can check in depth regarding your issue ?. You can grant me support access via WPMU DEV > Support > Support Access > Grant Access.

    Looking forward to hearing back from you.

    Thanks & Kind Regards,
    Milan Savaliya.

  • Milan

    Hello @Bryant,

    Thanks for granting us requested support staff access.

    After playing a lot with z-indexed I got to know that this is kind of event bubbling behavior which is hard to resolve as two elements are placed on top of each other within same container element. This thread on stackoverflow gave me idea about this event bubbling.
    http://stackoverflow.com/questions/1026060/handling-click-events-on-z-indexd-layers

    Now as workaround for this one, I've used this css snippet to move closing icon in the center of its container.

    div.upfront-navigation div[data-aliment="center"] ul.menu li.wrap_burger_nav_close{
        text-align: center;
    }

    I just want to inform you that I've already placed this snippet in your customized menu style of menu element.

    Let me know if you want something else dear @Bryant.

    Thanks & Kind Regards,
    Milan Savaliay.

  • Bryant

    Hi,

    Thanks for your help solving this issue. This solution still allows a user to be trapped in the loop of clicking the menu open button depending on the size of the user screen. We are also still having problems with the text in the mobile menu not accepting the alignment parameter as set by the menu options. As well the "hero text" is still laying above the mobile menu.

  • Milan

    Hello @Bryant,

    Hope you are doing well.

    This solution still allows a user to be trapped in the loop of clicking the menu open button depending on the size of the user screen

    After digging a lot and trying different possible solution, I've came to this CSS snippet

    div[data-style="burger"] ul.menu > li {
        text-align: center;
    }

    which fixed menu navigation issue and also aligned menu items to the center. Currently I've placed above css snippet to your menu preset's custom css editor on behalf of you. Can you please confirm its working on your end now ? I've attached screenshot for your confirmation.

    We are also still having problems with the text in the mobile menu not accepting the alignment parameter as set by the menu options.

    I can confirm this issue on your end but on on mine. That means its must be issue with some other custom css. But above css snippet has fixed this one too. Please confirm this too.

    As well the "hero text" is still laying above the mobile menu.

    I am sorry but I didn't see any "hero text" above mobile menu. Are you talking about logo text ? it'll be good to you if you include snapshot of this ? Or just direct me with little bit more info. that will work too.

    Looking forward to hearing back from you.

    Thanks & Kind Regards,
    Milan Savaliya.

  • Bryant

    In the picture you included the hero text (Hero text is text the that is large and makes a statement that shows as soon as the page is seen). And as you see in the picture you have included, it is showing while the menu is open. Which it should not as the menu is set to full screen. Also you can see that the text is showing over the menu because the picture that the text belongs to is not showing.

    We did not have time to mess with it any longer, so we just set it to the be a half menu from the side. Which seems to have fixed most of this problems. But, we did confirm the issue that the ticket was for on 3 different installs on two different servers. And after the update to all of them to the latest version of upfront the issue was still present.

    But, thank you for your help and effort. (I meant that sincerely not sarcastically)