Off Canvas Panel is closed in Firefox mobile

Hi Luiz,

Upon testing, I was able to confirm that the issue you’re having is occurring on my end as well: https://share.getcloudapp.com/eDu58npZ

I tried replicating the issue on my Test Website by creating a similar setup, and correspondingly however, I was not able to replicate the issue: https://share.getcloudapp.com/KouAZn5n

With this said, it may be that this is not a theme related issue. Can you try number 1 here and see how it goes?: https://docs.generatepress.com/article/debugging-tips/

Can you also try creating a new menu and assigning it to the Off Canvas Panel and see if the issue also exists there?

Kindly let us know how it goes. :)

Fernando,

I did the 2 tests you suggested, and neither solved the problem.
On firefox mobile the error persists.

I created an admin user so I can do some testing.

I have backed up the database and site folders.

I see.

Can you try replacing the URL link of this menu item to #?

Specifically, replace this: https://share.getcloudapp.com/RBunYldy

With a Custom Link that has a # URL: https://share.getcloudapp.com/YEurRZA2

Kindly let us know how it goes. :)

I made the changes you asked for.

In front of each menu I added an arrow > with information on how it is configured:

* PAGE: When I select a page from the picklist.
* #: When I create a link using the # option in place of a url.
* BLANK: When I remove the # and leave it with nothing, neither url nor #.

On the Firefox Mobile. The only option that when clicked, does not close the menu is the "#".
You can check.

However, when using the # option as a grouper of menu items,
it is not interesting since, In a Desktop Browser, when you click on any option with #,
the page is automatically scrolled to the top.

*** The problem is some plugin incompatibility with Firefox Mobile, the problem only occurs on Firefox mobile.
I would love for you to understand this.

It would be much better to fix this bug, don't you think?

I see. This isn’t a bug, the sub menu items are meant to appear through the drop down button.

With that said, if these menu items with BLANK and # are just grouping Menu items, one approach we may try is to make the dropdown button have a 100% width on top of these menu items.

For instance, try adding this CSS in Appearance > Customize > Additional CSS:

#generate-slideout-menu.main-navigation .main-nav ul a {
    position:relative;
}

#generate-slideout-menu.main-navigation .main-nav ul a span.dropdown-menu-toggle {
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    width:100%;
    z-index:10000;
    display:flex;
    justify-content:flex-end;
}

Hope this clarifies. Kindly let us know how it goes. :)

Fernando.
I greatly appreciate your effort in trying to help.
But apparently you can't understand what I'm showing you.

Making adjustments to my site to resolve a theme compatibility issue with Firefox Mobile will not resolve the issue for all users.

See that everything works perfectly on Edge Mobile, Chrome Mobile, Opera Mobile and Samsung Mobile. No need to make any adjustments.

Only in Firefox Mobile this problem occurs.

I have another site, And he has the same problem. See on the private message.

Would it be possible for @diggeddy or @leohsiang to take a look at this situation,
maybe they can help.

Thanks.

Hi Luiz,

first off which device is this on ? is it Android and the latest version of FF ?

Samsung Galaxy Note 10
Android 11 Updated
Firefox Mobile: v99.1.1 Last Version

Samsung Galaxy J2 Prime
Android 6.0.1
Firefox Mobile: v99.1.1 Last Version

The problem affect the 2 devices.

I am going to ask one of my Android using colleagues, as i cannot replicate the problem on my iphone :(

Ok.

Maybe hapen't only on Android Firefox Mobile.

Hey @diggeddy.

Any news?

Please, use the site below for test.

Hi Luiz,

To help out:

I tried checking this on a few Android phones (Xiaomi Redmi Note 9s and Samsung J7 Pro) on both Chrome and Firefox and I see the same behavior. (tapping on the arrow toggles the submenu. tapping on the text itself goes to the link)

I see no difference and I believe this is the intended behavior.

The expected behavior when clicking on the text of a parent item in the Off Canvas Panel menu (not the dropdown arrow), is that it opens the Sub-Menu and displays the list of options.
Even if the parent item has some link assigned to it.

The site is using Click - Arrow w/ doesn't fit this specific expected behavior.

Customizer has 3 navigation dropdown options w/ varying behaviors.

Hover is the most basic as it's basically just a :hover to show the submenus.

Click - Menu item is added for menus where the parent menu items are intended to NOT have menu links (href="#") and are used purely for toggling its sub-menu. (This seems applicable to your preferred menu behavior as this nulls the default event binded to <a> tags.)

Click - Arrow is an added option so you can use the text to go to the actual link of the menu while still having the option to open a sub-menu item using the arrow icon.

The difference between Click - Menu item and Click - Arrow is an important distinction as the special caveat is what separates their use cases.

In your case, it seems like the most appropriate to use is Click - Menu item.

Hi Elvin,

Thanks for the help.

01 - I said expected behavior, but actually the most correct is (the behavior performed by most mobile browsers).

02 - However, let's say that as you suggested, the expected behavior is that (according to the current settings), when clicking on the parent menu, the link of this menu is opened, instead of displaying the sub-menu.

In this case, no mobile browser is behaving as expected, because:
* In Firefox Mobile, when clicking on the menu item, it does not lead to the link, it just closes the menu, (test in roquesburguer please), the "My Account" pages or "Contact" are not opened when clicking on the menu. simply the Menu is closed.

* In other Mobile Browsers, when clicking, it also does not take the pages, it simply opens the Sub-menu.

03 - Can you fill this?
There is a discrepancy in the behavior of the Canva Menu, it does not work as it should (open the link), and it also works differently in the aforementioned browsers, as I have explained exhaustively.

04 - I will use the # option to group my menus, since after correcting this, it will be the only way that will work as I intend.